Bar chart with wrong bar height - highcharts

Question

There are three data series, two of them are bar type series (Insolation Duration and Power Duration).
When I import data (from Striped Table) to the Highcharts, the bar chart height doesn't display properly.
It doesn't fit the scale of the chart's value, like this:
e.g. 2018/05/01
The Insolation value is less than the Power value, but the height of Power Duration bar chart is higher than Insolation Duration.
Here are the chart options I use:
var ChartObj =
{
type: "chart",
value:
{
"chart": { "alignTicks": false, "zoomType": "xy" },
"title": { "text": " ", "floating": false, "align": "center" },
"xAxis":
[
{
"categories": [], //PUT LABEL IN HERE
"crosshair": true, "index": 0, "isX": true
}
],
"tooltip": { "shared": true },
"legend":
{
"layout": "horizontal",
"align": "right",
"x": 0,
"verticalAlign": "top",
"y": 0,
"floating": false,
"backgroundColor": "#FFFFFF"
},
"yAxis":
[
{
"gridLineColor": "transparent",
"labels":
{
"format": "{value}",
"style": { "color": "#7cb5ec" },
"enabled": false
},
"title": { "text": null, "style": { "color": "#7cb5ec" } },
"opposite": false,
"index": 0,
},
{
"gridLineColor": "transparent",
"labels":
{
"format": "{value}",
"style": { "color": "#90ed7d" },
"enabled": false
},
"title":
{
"text": null,
"style": { "color": "#90ed7d" }
},
"opposite": true,
"index": 1,
},
{
"gridLineColor": "transparent",
"labels":
{
"format": "{value}",
"style": { "color": "#f7a35c" },
"enabled": false
},
"title": { "text": null,
"style": { "color": "#f7a35c" } },
"opposite": true,
"index": 2,
}
],
"series":
[
{
// Insolation
"name": " ",
"color": "#90ed7d",
"tooltip":
{
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</sup></b><br/>"
},
"yAxis": 0,
"type": "column",
"data": [],
"_symbolIndex": 0
},
{
// Power
"name": " ",
"color": "#f7a35c",
"tooltip":
{
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</b><br/>"
},
"yAxis": 1,
"type": "column",
"data": [],
"_symbolIndex": 1
},
{
// PR
"name": " ",
"color": "#7cb5ec",
"tooltip":
{
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</b><br/>"
},
"yAxis": 2,
"type": "line",
"data": []
}
]
}
};

Answer 1

You will need to set a max to the 2 first column axis like this
{
"gridLineColor": "transparent",
"labels":
{
"format": "{value}",
"style": { "color": "#7cb5ec" },
"enabled": false
},
"title": { "text": null, "style": { "color": "#7cb5ec" } },
"opposite": false,
"index": 0,
max:12 // The value to set
},
Or change the index of your series to use the same yAxis
Demo Fiddle