set different colors for each column in highcharts

Question

I need to set different colors for each column in Highcharts graph dynamically. My Highcharts graph is:

options = {
         chart: {
             renderTo: 'chart',
             type: 'column',
             width: 450
         },
         title: {
             text: 'A glance overview at your contest’s status'
         },
         xAxis: {
             categories: ['Approved Photos', 'Pending Approval Photos', 
                          'Votes', 'Entrants'],
             labels: {
                 //rotation: -45,
                 style: {
                     font: 'normal 9px Verdana, sans-serif, arial'
                 }
             }
         },
         yAxis: {
             allowDecimals: false,
             min: 0,
             title: {
                 text: 'Amount'
             }
         },
         legend: {
             enabled: false
         },
         series: []
     };
     series = {
         name: "Amount",
         data: [],
         dataLabels: {
             enabled: true,
             color: '#000000',
             align: 'right',
             x: -10,
             y: 20,
             formatter: function () {
                 return this.y;
             },
             style: {
                 font: 'normal 13px Verdana, sans-serif'
             }
     }
 };

The data is set this way:

for (var i in Data) {
  if (parseInt(Data[i]) != 0) {
    series.data.push(parseInt(Data[i]));
  } else {
    series.data.push(null);
  }
}
options.series.push(series);
chart = new Highcharts.Chart(options);

How can I dynamically set different colors for each data point in this loop?

score 84 · Answer 1 · answered Apr 23 '13 at 12:31

84

Here is another solution with the latest version of Highcharts (currently 3.0).

Set the colorByPoint option to true and define the color sequence that you want.

options = {
    chart: {...},
    plotOptions: {
        column: {
            colorByPoint: true
        }
    },
    colors: [
        '#ff0000',
        '#00ff00',
        '#0000ff'
    ]
}

Here is an example based upon Highcharts Column with rotated labels demo

answered Apr 23 '13 at 12:31

Jérôme

2,070
15
21

1

note that this solution works on bar charts as well as column. Just change 'column' to 'bar' in the plotOptions array – Rooster Jun 21 '13 at 19:15
1

Precisely what I needed and much easier to implement than the accepted answer. Thanks! – keithxm23 Apr 02 '14 at 13:53
Any way to do something like this for multiple series? Not globally? I have a line chart and column, but I want my line color to be different than what I set for the column series. In the column chart, certain columns need to be different colors as well. – SovietFrontier Nov 06 '18 at 21:14

score 62 · Accepted Answer · edited Nov 06 '18 at 21:28

62

When you add the value to the series.data you can also set the color using the point options e.g

series.data.push({ y: parseInt(Data[i]), color: '#FF0000' });

For more details about the point options see https://api.highcharts.com/class-reference/Highcharts.Point#color

edited Nov 06 '18 at 21:28

SovietFrontier

2,047
1
15
33

answered Oct 12 '11 at 11:04

escouser

1,913
19
15

Hi! It's me again... How i can set column width by data. For example: if data is 23 i want to set column width 100px, and if data is 123 it will be 110px. I need this option for putt data in the middle of column. – user750487 Oct 12 '11 at 12:22
Sorry, I'm not sure how you'd do this in highcharts. – escouser Oct 14 '11 at 06:33
you can plotOptions->series->linewidth to set the width. But, that would fixed width for all the bars in the chart. May be you can set it using the max value. http://www.highcharts.com/ref/#plotOptions-series--lineWidth – Rajani Karuturi Nov 14 '11 at 11:19
2

That documentation link is broken – shanabus Aug 20 '15 at 20:37
Thank you for this answer ! – Filip Lukáč Dec 19 '16 at 10:20
@shanabus I updated the link, works now! wow three years later haha. – SovietFrontier Nov 06 '18 at 21:29
Any solution like this for HighStock charts? – adamsfamily May 20 '19 at 11:21

score 9 · Answer 3 · edited Oct 27 '17 at 13:19

Try either of these approaches:

Approach 1:

Highcharts.setOptions({ colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] });

Approach 2:

var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000'];

 $('#bar_chart').highcharts({
        chart: {
            type: 'column'              
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: ''
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: false                       
                }
            }
        },         

        series: [{
            name: '',
            colorByPoint: true,
            data: [{
                name: 'Blue',
                y: 5.78,
                color: colors[0]

            }, {
                name: 'Green',
                y: 5.19,
                color: colors[1]

            }, {
                name: 'Pink',
                y: 32.11,
                color: colors[2]

            }, {
                name: 'Yellow',
                y: 10.04,
                color: colors[3]

            }, {
                name: 'Purple',
                y: 19.33,
                color: colors[4]

            }]
        }]
    });

Is there a way to set the color to an array of different colors? For example, I am returning what colors I want from my data, so I want to use that instead of manually setting it, and certain columns have certain colors. — SovietFrontier, Nov 06 '18 at 20:23

Ravi Anand · Answer 4 · 2019-02-07T16:43:00.197

i had colors from API response and 2 series. second series with dynamic colors.

following is sample to set dynamic colors while series mapping.

const response = [{
    'id': 1,
    'name': 'Mango',
    'color': '#83d8b6',
    'stock': 12.0,
    'demand': 28,
  },
  {
    id ': 2,
    'name': 'Banana',
    'color': '#d7e900',
    'stock': 12.0,
    'demand': 28,
  }
];
let chartData: {
  categories: [],
  series: []
};
chartData.categories = response.map(x => x.name);
chartData.series.push({
  name: 'Series 1',
  type: 'column',
  data: response.map(x => x.demand)
});
chartData.series.push({
  name: 'Series 2',
  type: 'column',
  data: response.map(x => ({
    y: x.stock,
    color: x.color // set color here dynamically
  }))
});
console.log('chartData: ', chartData);

you could also read more about Highcharts series Point and Marker

set different colors for each column in highcharts

4 Answers4

Linked