This is a sample configuration for a Bar & Line Chart in Apps.
{
"id": "barAndLineChart",
"type": "highcharts",
"source": "ice_cream_sales",
"config": {
"title": {
"text": "Bar chart with multiple yAxis"
},
"subtitle": {},
"exporting": {},
"chart": {
"type": "bar"
},
"series[0]": {
"type": "line"
},
"series": [
{
"columnName": "Ice_Cream_Sales",
"name": "Ice cream sales",
"turboThreshold": 0,
"yAxis": 0,
"type": "bar"
},
{
"columnName": "Temperature",
"name": "Temperature",
"turboThreshold": 0,
"yAxis": 1,
"type": "line"
}
],
"plotOptions": {
"series": {
"animation": false
}
},
"xAxis": [
{
"categories": [
"Day"
]
}
],
"yAxis": [
{
"title": {
"text": "Ice cream sales"
}
},
{
// this setting allows you to choose where your second yAxis
// should be: top (true); bottom, below first yAxis (false)
"opposite": true,
"title": {
"text": "Temperature"
}
}
]
}
}
Datasource used:
{
"id": "ice_cream_sales",
"origin": "raw",
"config": {
"schema": "table",
"data": [
{"Day": 1, "Temperature": 14.2, "Ice_Cream_Sales": 215},
{"Day": 2, "Temperature": 16.4, "Ice_Cream_Sales": 325},
{"Day": 3, "Temperature": 11.9, "Ice_Cream_Sales": 185},
{"Day": 4, "Temperature": 15.2, "Ice_Cream_Sales": 406},
{"Day": 5, "Temperature": 18.5, "Ice_Cream_Sales": 522},
{"Day": 6, "Temperature": 22.1, "Ice_Cream_Sales": 412},
{"Day": 7, "Temperature": 19.4, "Ice_Cream_Sales": 614},
{"Day": 8, "Temperature": 25.1, "Ice_Cream_Sales": 544},
{"Day": 9, "Temperature": 23.4, "Ice_Cream_Sales": 421}
]
}
},