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

Question

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?

score 115 · Accepted Answer · answered Sep 14 '11 at 11:42

115

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

answered Sep 14 '11 at 11:42

eolsson

12,567
3
41
43

6

The correct answer should be from @antonversal ! Automatic ``{plotOptions: {column: {colorByPoint: true}}}`` magic! – Cassiano May 20 '15 at 11:57

score 69 · Answer 2 · edited Dec 26 '15 at 13:18

69

Also you can set option:

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

for more information read docs

edited Dec 26 '15 at 13:18

Sammy Larbi

3,062
3
26
21

answered Mar 15 '12 at 15:18

antonversal

1,219
9
10

10

This should be the correct answer. It is impractical to manually set the colour of each bar in the series. – harryg Jun 07 '13 at 15:45

Ricardo Alvaro Lohmann · Answer 3 · 2013-02-14T02:46:14.657

31

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:

edited Feb 14 '13 at 02:46

answered Feb 14 '13 at 02:36

Ricardo Alvaro Lohmann

26,031
7
82
82

Allen Liu · Answer 4 · 2011-09-14T09:59:43.487

16

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 =)

edited Sep 14 '11 at 09:59

answered Sep 14 '11 at 09:50

Allen Liu

3,948
8
35
47

1

hey i've tried to use the code above but my whole graph changes to the first colo #058DC7 instead without any color variation . Is there any way to set the color variation to automatic ? – jamen Nov 23 '11 at 16:35
2

You could have at least used a column chart for the demo. – Farzher Nov 06 '12 at 20:49
It wont' work because all the data points are in one series, and those colours are for colouring in series... – philw Jul 13 '16 at 16:29

score 10 · Answer 5 · edited Apr 07 '14 at 15:46

10

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'
},

edited Apr 07 '14 at 15:46

Andrew Barber

39,603
20
94
123

answered Nov 13 '13 at 06:49

Prem Kumar Maurya

457
4
11

score 4 · Answer 6 · answered Jun 25 '12 at 20:17

4

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']});

answered Jun 25 '12 at 20:17

thirumalaa srinivas

3,530
1
16
5

score 2 · Answer 7 · answered Jul 13 '17 at 04:47

2

just put chart

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

answered Jul 13 '17 at 04:47

pradip kor

459
4
8

score 1 · Answer 8 · answered Oct 06 '16 at 09:44

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
            }
        }

    });

score 1 · Answer 9 · answered Jan 04 '17 at 10:51

1

add properties:

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

answered Jan 04 '17 at 10:51

Tran Anh Hien

687
8
11

score 0 · Answer 10 · edited Dec 21 '17 at 11:04

0

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

plotOptions: {
  column: {
   colorByPoint: true
  }
}

edited Dec 21 '17 at 11:04

Sunil

3,404
10
23
31

answered Dec 21 '17 at 09:57

Leo Rams

669
9
24

score -1 · Answer 11 · edited Nov 04 '15 at 13:56

-1

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

edited Nov 04 '15 at 13:56

Ori Lentz

3,668
6
22
28

answered Nov 04 '15 at 04:34

herlambang

185
2
9

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

11 Answers11

Linked

Related