How can I change the colors of my highcharts piechart?

Question

I'm using highcharts to make a piechart but I'm having trouble loading a custom color set for my chart.

Here is my code:

     <script type="text/javascript">
     $(function () {
     Highcharts.setOptions({
     colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
    });
    return new Highcharts.Chart({


        chart: {
            renderTo: 'trailpiechart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: "#f8f8f8",
            margin: [20, 20, 20, 20]
        },


        credits: {
            enabled: false
        },

        title: {
            text: caption
        },
        tooltip: {
            formatter: function () {
                return this.y + ' links';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            layout: 'vertical',
            floating: false,
            borderRadius: 0,
            borderWidth: 0
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: data
        }]
    });
    });
</script>

My pie chart works with this code but it only uses the default color pallet.

How do you specify a custom color set?

Ricardo Alvaro Lohmann · Accepted Answer · 2012-08-27T22:32:05.887

86

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

Look the following example http://jsfiddle.net/8QufV/

edited Aug 27 '12 at 22:32

answered Apr 09 '12 at 14:30

Ricardo Alvaro Lohmann

26,031
7
82
82

2

I have tried this but, my legend color are getting changed but the pie-chart color is not changing. – Rohitesh Sep 08 '17 at 10:14
https://stackoverflow.com/a/28840716/3660648 Please check this. We have to add `color` property at series level. – Tejashree Sep 21 '21 at 09:52

score 13 · Answer 2 · answered May 01 '17 at 00:00

For those of you that prefer to initialize the color in the configs, you could simply put the colors in the plotOptions portion of the config object like so:

...,
plotOptions: {
  pie: {
   colors: [
     '#50B432', 
     '#ED561B', 
     '#DDDF00', 
     '#24CBE5', 
     '#64E572', 
     '#FF9655', 
     '#FFF263', 
     '#6AF9C4'
   ],
   allowPointSelect: true,
   cursor: 'pointer',
   dataLabels: {
     enabled: false
   },
   showInLegend: true
 }
},
...

How would one initialise tooltip functions using the config method? — JaxJames, Jan 20 '21 at 02:02

score 7 · Answer 3 · answered Apr 04 '12 at 13:35

7

I think what you need to do is set the colors using theme instead of setOptions as follows:

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

answered Apr 04 '12 at 13:35

Linger

14,942
23
52
79

2

If you go to [Pie Chart Demo](http://www.highcharts.com/demo/pie-basic/grid) and then click on 'View visual theme' you will see how to manipulate the whole theme. – Linger Apr 04 '12 at 13:41
hi Todd color not changing by using your above code .still it showing default colors of pie chart – Sreenath Plakkat Apr 05 '12 at 05:34

score 2 · Answer 4 · answered Sep 26 '17 at 19:28

To answer @Loko Web Design's question https://stackoverflow.com/a/38794379/7475250

Is there a webpage that says to what each of the "colors" corresponds? All the answers here show something like:
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']
But what do #333, #CB2326, etc. actually change? Obviously I can just change them and see what changes, but it would nice to have this reference available somewhere.

The color docs are available here. Although helpful they do not describe what changing a specific color actually does. Below is my best description.

The colors prop gives Highcharts the colors you would like the chart to loop through. For example if you had the following color prop.

colors: ['blue', 'green']

Your pie slices would alternate between blue and green. Changing blue to red your colors would then alternate between red and green. Test it with the following fiddle

Expanding the color list increases the number of colors before repeating.

colors: ['blue', 'green', 'yellow']

Would repeat the colors if more than 4 slices are in your dataset.

score 1 · Answer 5 · edited Apr 30 '14 at 14:33

1

Highcharts.setOptions({
 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',      '#6AF9C4']
});

edited Apr 30 '14 at 14:33

martincarlin87

10,848
24
98
145

answered Jul 30 '13 at 18:12

min2bro

554
2
9
19

score 1 · Answer 6 · answered Aug 05 '16 at 16:59

Is there a webpage that says to what each of the "colors" corresponds? All the answers here show something like:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

But what do #333, #CB2326, etc. actually change? Obviously I can just change them and see what changes, but it would nice to have this reference available somewhere.

bugovicsb · Answer 7 · 2016-11-25T11:51:14.067

1

I had the same problem. In highcharts.css there's a section called "Default colors". After I deleted this section, I could use custom colors. Anyway, I guess you do not need highcharts.css if you use version v5.0.4 or higher.

edited Nov 25 '16 at 11:51

answered Nov 25 '16 at 11:23

bugovicsb

422
1
7
15

Lot of answers saying to use "colors" property, but just this one has worked! I'd suggest to create a css override to .highcharts-color-0 to .highcharts-color-9 with colors you want! – lucasumberto Aug 08 '19 at 16:14

score 0 · Answer 8 · answered Feb 10 '17 at 12:51

0

Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]

In high charts inbuilt colors we have. So you need to change the path of the color[0] or [1]........[6]

answered Feb 10 '17 at 12:51

Kondal

2,870
5
26
40

How can I change the colors of my highcharts piechart?

8 Answers8

Linked