Pregunta

I have a highcharts with stacked columns and 2 splines. The primary yAxis represnts the y values of the stacked columns and the secondary yAxis represents the 2 splines. Take a look at the demo, one of the spline's y-values are not displayed correctly. If you hover on the points on the spline, you can see the data are correct but the displaying y scale is not. If I comment out "stacking: normal" setting, then the splines are displayed correctly.

http://jsfiddle.net/chicmob/w2Tux/

Is this a highcharts bug or is there some other settings I overlooked?

        chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    yAxis: [{ // Primary yAxis
        min: 0,
        max: 400,
        tickInterval:100,
    }, { // Secondary yAxis
        min: -40,
        max: 100,
        tickInterval: 20,
        opposite : true,
    }],        

    series: [{
        yAxis : 0,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        yAxis : 0,
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }, {    
        yAxis : 1,
        type : 'spline',
        data: [35, 60, 77, 56.7, 34, 55, 66, 72, 90, 45, 56, 60]
    } , {    
        yAxis : 1,
        type : 'spline',
        data: [24.3, 12, 41.2, 12.1, 4, 45, 31, 21.5, 9.3, 7.7, 13, 22]
    }]
¿Fue útil?

Solución

You're applying stacking: 'normal' to all series. When really, you only want to apply it to the 1st 2 series. Take stacking: 'normal' out of plotOptions and put it in the 1st 2 series:

$('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: [{ // Primary yAxis
        min: 0,
        max: 400,
        tickInterval:100
    }, { // Secondary yAxis
        min: -40,
        max: 100,
        tickInterval: 20,
        opposite : true
    }],        

    series: [{
        yAxis : 0,
        stacking: 'normal',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        yAxis : 0,
        stacking: 'normal',
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }, {    
        yAxis : 1,
        type : 'spline',
        data: [35, 60, 77, 56.7, 34, 55, 66, 72, 90, 45, 56, 60]
    } , {    
        yAxis : 1,
        type : 'spline',
        data: [24.3, 12, 41.2, 12.1, 4, 45, 31, 21.5, 9.3, 7.7, 13, 22]
    }]
});

http://jsfiddle.net/w2Tux/2/

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top