Hi,
I have a dataset with total tests, completed tests, and decimal to signify the rate they are completed as a percent.
I am attempting to have the tests and completed tests as a stacked bar chart with the completion percent on the right axis.
Data:
[
{
"name": "Tests Received",
"x": {{test.data['date_trunc']}},
"y": {{test.data['test_received']}},
"type": "bar",
"hovertemplate": "<b>%{x}</b><br>%{fullData.name}: %{y}<extra></extra>",
"transforms": [
{
"type": "sort",
"target": {{test.data['date_trunc']}},
"order": "ascending"
},
{
"type": "aggregate",
"groups": {{test.data['date_trunc']}},
"aggregations": [
{
"target": "y",
"func": "sum",
"enabled": true
}
]
}
],
"marker": {
"color": "#033663"
}
},
{
"name": "Tests Completed",
"x": {{test.data['date_trunc']}},
"y": {{test.data['tests_completed']}},
"type": "bar",
"hovertemplate": "<b>%{x}</b><br>%{fullData.name}: %{y}<extra></extra>",
"transforms": [
{
"type": "sort",
"target": {{test.data['date_trunc']}},
"order": "ascending"
},
{
"type": "aggregate",
"groups": {{test.data['date_trunc']}},
"aggregations": [
{
"target": "y",
"func": "sum",
"enabled": true
}
]
}
],
"marker": {
"color": "#247BC7"
}
},
{
"name": "Completion Rate",
"x": {{test.data['date_trunc']}},
"y2": {{test.data['completion_rate']}},
"type": "line",
"hovertemplate": "<b>%{x}</b><br>%{fullData.name}: %{y}<extra></extra>",
"transforms": [
{
"type": "sort",
"target": {{test.data['date_trunc']}},
"order": "ascending"
}
],
"marker": {
"color": "#55A1E3"
},
"mode": "lines+markers"
}
]
Layout:
{
"title": {
"text": "Performance",
"font": {
"color": "#3D3D3D",
"size": 16
}
},
"font": {
"family": "Inter",
"color": "#979797"
},
"showlegend": true,
"legend": {
"xanchor": "center",
"x": 0.5,
"y": 1.1,
"orientation": "h"
},
"margin": {
"l": 72,
"r": 24,
"t": 80,
"b": 72,
"pad": 2
},
"hovermode": "closest",
"hoverlabel": {
"bgcolor": "#000",
"bordercolor": "#000",
"font": {
"color": "#fff",
"family": "Inter",
"size": 12
}
},
"clickmode": "select+event",
"dragmode": "select",
"xaxis": {
"title": {
"text": "Start of Week",
"standoff": 6,
"font": {
"size": 12
}
},
"type": "date",
"tickformat": "",
"automargin": true,
"fixedrange": true,
"gridcolor": "#fff",
"zerolinecolor": "#fff"
},
"yaxis": {
"title": {
"text": "Volume",
"standoff": 6,
"font": {
"size": 12
}
},
"type": "linear",
"tickformat": "",
"automargin": true,
"fixedrange": true,
"zerolinecolor": "#DEDEDE"
},
"yaxis2": {
"title": {
"text": "Completion Rate",
"standoff": 12,
"font": {
"size": 12
}
},
"overlaying": "y",
"side": "right",
"type": "linear",
"automargin": true,
"fixedrange": true,
"zerolinecolor": "#DEDEDE",
"tickformat": "%",
"range": [0,1]
}
}