Bar chart with wrong bar height

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