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?

Answer 1

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