HighCharts - 2nd yAxis graphs not scaling correctly

Question

i'm having a problem with my second yAxis using HighCharts. The spline graph scales correctly, however the bar graph (second yAxis) does not. Note that the bar graph has two sections - the irrelevant section is invisible.

http://jsfiddle.net/warricksmith/jqvxf30z/1/

    $(function () {
$('#container').highcharts({
    chart: {
        alignTicks: false,
        backgroundColor: null,
        spacingBottom: 6,
        spacingLeft: 2,
        spacingRight: 2,
        spacingTop: 2
    },
    credits: {
        enabled: false
    },
    global: {
        useUTC: false
    },
    legend: {
        align: "center",
        enabled: true,
        layout: "horizontal",
        verticalAlign: "bottom",
        y: 5
    },
    navigator: {
        enabled: false,
        height: 40,
        series: {
            color: "#21B567"
        }
    },
    plotoptions: {
        column: {
            borderwidth: 0
        },
        line: {
            lineWidth: 1,
            marker: {
                enabled: false
            }
        },
        series: {
            pointInterval: null,
            pointStart: null
        },
        spline: {
            lineWidth: 2,
            marker: {
                enabled: true
            }
        }
    },
    rangeselector: {
        enabled: false
    },
    scrollbar: {
        enabled: false
    },

    series: [{
        name: 'Peak Demand',
        stacking: null,
        title: 'kVA',
        type: 'spline',
        color: "#FF6F34",
        data: [821,
        794,
        737,
        748,
        778,
        794,
        889,
        831,
        819,
        821,
        821,
        877],
        tooltip: {
            valueSuffix: 'kVA'
        }

    }, {
        name: "Power at peak",
        stacking: null,
        title: "kVA",
        tooltip: {
            valueSuffix: " kVA"
        },
        type: "spline",
        color: "#33BAE3",
        data: [788,
        770,
        722,
        733,
        747,
        755,
        747,
        814,
        803,
        804,
        805,
        737]


    }, {
        color: "#339A63",
        data: [
        0.04,
        0.03,
        0.02,
        0.02,
        0.04,
        0.05,
        0.16,
        0.02,
        0.02,
        0.02,
        0.02,
        0.16],
        name: "Power factor (lagging)",
        stacking: 'normal',
        title: "",
        tooltip: {
            valueSuffix: " "
        },
        type: "column",
        yAxis: 1
    }, {
        color: "rgba(245,241,232,0)",
        data: [
        0.96,
        0.97,
        0.98,
        0.98,
        0.96,
        0.95,
        0.84,
        0.98,
        0.98,
        0.98,
        0.98,
        0.84, ],
        name: "Power factor (leading)",
        stacking: "normal",
        title: "",
        tooltip: {
            valueSuffix: " "
        },
        type: "column",
        yAxis: 1
    }, ],

    title: {
        text: 'Peak Demand and Power factor'
    },
    subtitle: {
        text: 'Power-Star'
    },
    xAxis: [{
        categories: ['Mar 14', 'Apr 14', 'May 14', 'Jun 14',
            'Jul 14', 'Aug 14', 'Sep 14', 'Oct 14', 'Nov 14', 'Dec 14', 'Jan 15', 'Feb 15'],
        lables: {
            style: {
                fontSize: "12px",
                fontWeight: "bold"
            }
        },
        tickPixelInterval: 150,
        tickPosition: "inside",
        type: "category"
    }],
    yAxis: [{ // Primary yAxis
        gridLineWidth: 1,
        index: 0,
        labels: {
            style: Object,
            y: 10
        },
        max: undefined,
        maxPadding: null,
        min: undefined,
        opposite: false,
        title: {
            text: "kVA"

        }
    }, {
        gridLineWidth: 0,
        index: 1,
        labels: {
            enabled: false
        },
        max: undefined,
        maxPadding: null,
        min: undefined,
        opposite: false,
        showLastLabel: false,
        title: {
            text: ""
        }
    }, {
        gridLineWidth: 0,
        index: 2,
        labels: {
            y: 10
        },
        max: 1,
        maxPadding: 0,
        min: 0.8,
        opposite: true,
        title: {
            text: ""
        }
    }, {
        gridLineWidth: 0,
        index: 3,
        labels: {
            enabled: false
        },
        max: "1",
        maxPadding: 0,
        min: 0.8,
        opposite: true,
        showLastLabel: false,
        title: {
            text: ""
        }
    }, {
        gridLineWidth: 0,
        index: 4,
        labels: {
            enabled: false
        },
        max: "1",
        maxPadding: 0,
        min: 0.8,
        opposite: true,
        showLastLabel: false,
        title: {
            text: ""
        }
    }],
    tooltip: {
        shared: true
    },
});

});

It will be helpful for others if you provide a JSFiddle, example jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/… — SBirthare

Paweł Fus Paweł Fus · Accepted Answer · 2015-03-03T12:54:20

The problem is that you have so many yAxes that you made a mistake. You are connecting series to yAxis: 1 which means second yAxis in the options. Meanwhile you are setting min and max for third, fourth and fifth yAxes and enabling labels only for the third one..

Fixed demo: http://jsfiddle.net/jqvxf30z/2/

I set yAxis: 2 for series, since that yAxis is most probably responsible for columns.

HighCharts - 2nd yAxis graphs not scaling correctly

1 Answers