How do you change the colour of each category within a highcharts column chart?

Highcharts Problem Overview

I have have a column chart which has a number of categories, each with a single data point (e.g. like this one). Is it possible to change the colour of the bar for each category? i.e. so each bar would have its own unique colour rather than all being blue?

Highcharts Solutions

Solution 1 - Highcharts

You can also set the color individually for each point/bar if you change the data array to be configuration objects instead of numbers.

data: [
      {y: 34.4, color: 'red'},     // this point is red
      21.8,                        // default blue
      {y: 20.1, color: '#aaff99'}, // this will be greenish
      20]                          // default blue

Example on jsfiddle

enter image description here

Solution 2 - Highcharts

Also you can set option:

  {plotOptions: {column: {colorByPoint: true}}}

for more information read docs

Solution 3 - Highcharts

Add which colors you want to colors and then set colorByPoint to true.

colors: [
'#4572A7', 
'#AA4643', 
'#89A54E', 
'#80699B', 
'#3D96AE', 
'#DB843D', 
'#92A8CD', 
'#A47D7C', 
'#B5CA92'
],

plotOptions: {
    column: {
        colorByPoint: true
    }
}

demo

Reference:

Solution 4 - Highcharts

Yes, here is an example in jsfiddle: http://jsfiddle.net/bfQeJ/

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

The example is a pie chart but you can just fill the series with all the colors to your heart's content =)

Solution 5 - Highcharts

You can add colors array in high chart graph for changing the color of graph. You can re-arrange these colors and you can also specify your own colors.

$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},

Solution 6 - Highcharts

Like mentioned by antonversal, reading the colors and using the colors option when creating the chart object works.

var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});

Solution 7 - Highcharts

just put chart

$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
        type: 'column'
}, .... Continue chart

Solution 8 - Highcharts

Just add this...or you can change the colors as per your demand.

Highcharts.setOptions({
        colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        plotOptions: {
            column: {
                colorByPoint: true
            }
        }
        
    });

Solution 9 - Highcharts

add properties:

 colors: ['Red', 'Bule', 'Yellow']

Solution 10 - Highcharts

This worked for me. Its tedious to set all the colour options for a series, especially if it's dynamic

plotOptions: {
  column: {
   colorByPoint: true
  }
}

Solution 11 - Highcharts

{plotOptions: {bar: {colorByPoint: true}}}

Content Type	Original Author	Original Content on Stackoverflow
Question	James Hollingworth	View Question on Stackoverflow
Solution 1 - Highcharts	eolsson	View Answer on Stackoverflow
Solution 2 - Highcharts	antonversal	View Answer on Stackoverflow
Solution 3 - Highcharts	Ricardo Alvaro Lohmann	View Answer on Stackoverflow
Solution 4 - Highcharts	Allen Liu	View Answer on Stackoverflow
Solution 5 - Highcharts	Prem Kumar Maurya	View Answer on Stackoverflow
Solution 6 - Highcharts	thirumalaa srinivas	View Answer on Stackoverflow
Solution 7 - Highcharts	pradip kor	View Answer on Stackoverflow
Solution 8 - Highcharts	V.Ahlawat	View Answer on Stackoverflow
Solution 9 - Highcharts	Tran Anh Hien	View Answer on Stackoverflow
Solution 10 - Highcharts	Leo Rams	View Answer on Stackoverflow
Solution 11 - Highcharts	herlambang	View Answer on Stackoverflow