CODEWITHSUNDEEP
javascripthighcharts
chofer
chofer

Reputation: 357

Highcharts overlapping and stacked column

How can I do a chart with overlapping and stacking columns?

I tried to do it with two axis, but I need both axis to be equals. The max value of each axis will change lot of times, so I cannot set a max value for them.

How can i set both axis to be equals, or how can i do the chart with only 1 axis ??

 $('#container').highcharts({
    chart: { type: 'column' },
    yAxis: [{
        min: 0,
        title: {
            text: 'Employees'
        }
    }, {
        title: {
            text: 'Profit (millions)'
        },
        opposite: true
    }],
    plotOptions: {
        column: {
            stacking: 'normal',
            grouping: false,
            shadow: false,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Employees',
        data: [150, 73, 80],
        pointPadding: 0.1
    },{
        name: 'Profit',
        data: [183.6, 178.8, 198.5],
        pointPadding: 0.1
    }, 

             {
        name: 'Employees Optimized',
        data: [440, 90, 40],
        pointPadding: 0.4,
        yAxis: 1
    },  {
        name: 'Profit Optimized',
        data: [203.6, 198.8, 208.5],
        pointPadding: 0.4,
        yAxis:1
    }]
});

Example

Fiddle

Upvotes: 2

Views: 1824

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

You can set multiple stacks and use a single yAxis for all series. Additionally you can also keep second yAxis that will be linked to the one that is used by all series, but placed on another side of the plot area.

JSFiddle: http://jsfiddle.net/aejr2L6e/

Upvotes: 2

Related Questions