CODEWITHSUNDEEP
javascripthighcharts
Rahul Bharadwaj
Rahul Bharadwaj

Reputation: 2784

Give different color to each stack in stacked bar in Highcharts

As the question states, I want to give different color to each stack in the stacked bar chart.

I have tried:

But as shown in picture, I want different color for each stack. here

Upvotes: 1

Views: 3269

Answers (2)

daniel_s
daniel_s

Reputation: 3732

You can set color for whole series points, or just for one point. There is no other way out, so in order to achieve the effect which is showed on your image, you need to set the different color on every point inside of your series, and then make this color a bit brighter on next series definition.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears']
    },
    plotOptions: {
        series: {
        stacking: 'normal'
      }
    },
    legend: false,
    series: [{
        name: 'Jane',
        data: [{
            y: 2,
          color: '#ff0000' // red
        }, {
            y: 3,
          color: '#00ff00' // green
        }, {
            y: 1,
          color: '#0000ff' // blue
        }]
    }, {
        name: 'Joe',
        data: [{
            y: 1,
          color: '#990000' // medium red
        }, {
            y: 2,
          color: '#009900' // medium green
        }, {
            y: 3,
          color: '#000099' // medium blue
        }]
    }, {
        name: 'John',
        data: [{
            y: 3,
          color: '#550000' // dark red
        }, {
            y: 1,
          color: '#005500' // dark green
        }, {
            y: 2,
          color: '#000055' // dark blue
        }]
    }]
});

Live example: https://jsfiddle.net/vyamk5cg/

Upvotes: 1

David R
David R

Reputation: 15639

Use the color property to set it.

series: [{
    name: 'Top',
    data: [
        {y:15, color:'blue'}, 
        {y:64, color:'red'}, 
        {y:27,  color:'green'}, 
        {y:32, color:'yellow'}, 
        {y:17, color:'purple'}
    ]
}.............

Hope this helps!

Upvotes: 0

Related Questions