I'm trying to display a graph with 2 data series. Series 1 is a line graph, series 2 is a column graph. 2 Y-axes, each with a different scale. From looking at the examples on the HighCharts site, this should be pretty simple to do and the examples they have are exactly what I'm looking for. However when I go to code it, the series data for the 2nd series does not show on the graph.

Take a look here: /

$(function () {

    var Data = [{
        "name": "Series1",
        "type": "line",
        "data": [40000, 60000, 54000, 58000, 66000]
    }, {
        "name": "Series2",
        "type": "column",
        "yaxis": "1",
        "data": [22300, 44, 22, 12456, 888]
    }]

    var Options = {
        chart: {
            renderTo: "container",
            zoomType: "x"
        },
        plotOptions: {
            line: {
                marker: {
                    enabled: false
                },
                animation: true
            },
            column: {
                animation: false
            }
        },
        title: {
            text: "Test"
        },
        legend: {
            enabled: true,
            layout: "vertical",
            align: 'right',
            verticalAlign: 'middle'
        },
        tooltip: {
            enabled: true,
        },
        yAxis: [{
            title: {
                text: 'Series 1'
            },
            min: 35000,
            max: 80000
        }, {
            title: {
                text: 'Series 2'
            },
            min: 0,
            max: 30000,
            opposite: true
        }],
        series: Data
    };


    myChart = new Highcharts.Chart(Options);
});

If you take out the min and max values for each of the Y-axes, both series data are shown but the axis labels on the right hand side disappear, as if the 2nd series is just being displayed against the y-axis on the left.

I don't know if I'm doing something wrong or its a bug.

Any ideas?

I'm trying to display a graph with 2 data series. Series 1 is a line graph, series 2 is a column graph. 2 Y-axes, each with a different scale. From looking at the examples on the HighCharts site, this should be pretty simple to do and the examples they have are exactly what I'm looking for. However when I go to code it, the series data for the 2nd series does not show on the graph.

Take a look here: http://jsfiddle/QgHHZ/2/

$(function () {

    var Data = [{
        "name": "Series1",
        "type": "line",
        "data": [40000, 60000, 54000, 58000, 66000]
    }, {
        "name": "Series2",
        "type": "column",
        "yaxis": "1",
        "data": [22300, 44, 22, 12456, 888]
    }]

    var Options = {
        chart: {
            renderTo: "container",
            zoomType: "x"
        },
        plotOptions: {
            line: {
                marker: {
                    enabled: false
                },
                animation: true
            },
            column: {
                animation: false
            }
        },
        title: {
            text: "Test"
        },
        legend: {
            enabled: true,
            layout: "vertical",
            align: 'right',
            verticalAlign: 'middle'
        },
        tooltip: {
            enabled: true,
        },
        yAxis: [{
            title: {
                text: 'Series 1'
            },
            min: 35000,
            max: 80000
        }, {
            title: {
                text: 'Series 2'
            },
            min: 0,
            max: 30000,
            opposite: true
        }],
        series: Data
    };


    myChart = new Highcharts.Chart(Options);
});

If you take out the min and max values for each of the Y-axes, both series data are shown but the axis labels on the right hand side disappear, as if the 2nd series is just being displayed against the y-axis on the left.

I don't know if I'm doing something wrong or its a bug.

Any ideas?

• javascript
• highcharts

1 Answer 1

Change yaxis to yAxis, and the value must be a number not a string.

You have this:

{
     "name": "Series2",
     "type": "column",
     "yaxis": "1",
     "data": [22300, 44, 22, 12456, 888]
 }

Must be this:

{
    "name": "Series2",
    "type": "column",
    "yAxis": 1,
    "data": [22300, 44, 22, 12456, 888]
}]

jsFiddle: http://jsfiddle/QgHHZ/5/