CODEWITHSUNDEEP
highcharts
James Hollingworth
James Hollingworth

Reputation: 14210

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

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?

Upvotes: 80

Views: 139428

Answers (11)

Leo Rams
Leo Rams

Reputation: 729

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

plotOptions: {
  column: {
   colorByPoint: true
  }
}

Upvotes: 0

pradip kor
pradip kor

Reputation: 469

just put chart

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

Upvotes: 2

Tran Anh Hien
Tran Anh Hien

Reputation: 747

add properties:

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

Upvotes: 1

V.Ahlawat
V.Ahlawat

Reputation: 51

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

    });

Upvotes: 1

antonversal
antonversal

Reputation: 1239

Also you can set option:

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

for more information read docs

Upvotes: 70

herlambang
herlambang

Reputation: 185

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

Upvotes: -1

Prem Kumar Maurya
Prem Kumar Maurya

Reputation: 477

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

Upvotes: 10

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26310

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:

Upvotes: 33

thirumalaa srinivas
thirumalaa srinivas

Reputation: 3640

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

Upvotes: 4

eolsson
eolsson

Reputation: 12727

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

Upvotes: 117

Allen Liu
Allen Liu

Reputation: 4038

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

Upvotes: 17

Related Questions