Highcharts - How to set custom colors for the series

javascript jquery charts highcharts

16,608

Solution 1

DEMO of different color for different series of the column chart from our customized array of colors thus overriding the default colors of the highcharts.

code:

var colors = ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A'];
$( '#container' ).highcharts({
    plotOptions: {
        pie: { //working here
            colors: colors
        }
    },
    colors:colors,
    series: [{
        type: 'column',
        data: [25, 34, 15, 17, 19],  
    },{
        type: 'column',
        data: [25, 34, 15, 17, 19],  
    },{
        type: 'column',
        data: [25, 34, 15, 17, 19],  
    }, {
        type: 'pie',
        data: [25, 34, 15, 17, 19],
        center: ['75%', '30%']
    }]
});

Solution 2

The trick is to set the series color and not global options colors or point colors.

Global options colors is an applied set for all charts on the page. It will be ok if you apply it to another chart.

Also, colorByPoint will need to be false. This is default false, so you can exclude.

Also make sure to set color and not color(s) if you wish to include a legend. The legend will not know what color to use if you set multiple colors and will just default.

$( '#container' ).highcharts({
    plotOptions: {
        column: { 
         //colorByPoint: false,
         //stacking: 'percent',
         },
         pie: { 
            colors: ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A']
        }
    },
    series: [{
        type: 'column',
        color: '#FF530D',
        data: [25, 34, 15, 17, 19]
    }, {
        type: 'pie',
        data: [25, 34, 15, 17, 19],
        center: ['75%', '30%']
    }, {
        type: 'column',
        color: '#333333',
        data: [15, 27, 10, 23, 21]
    }]
});

Here is an update to your js fiddle. http://jsfiddle.net/c5nhd/4/

This also works if you wish to stack by percent.

16,608

Author by

bilalshahid10

Updated on July 25, 2022

Comments

bilalshahid10 almost 2 years

I'm using Highcharts to render some charts for a project. My problem is that when I try to set colors array in plotOptions.column, it doesn't work. Although, it works fine for plotOptions.pie.

What I need to do is to set different color presets for different series types. So when I add series of same type, they have colors picked up from their colors array. But now, for some weird reason, the default colors are showing although I have defined my own colors array for each series type.

Here is the fiddle to better understand what I mean: http://jsfiddle.net/c5nhd/1/

And here is the link to official documentation: http://api.highcharts.com/highcharts#plotOptions.column.colors
bilalshahid10 almost 10 years

Wondering if that's the only way to do it since that's not what I want. This will set the color on series level but I need to set colors on series type level. The thing you have done here could also be achieved by setting colorByPoint to true in the plotOptions.column. Although plotOptions.column.colors is listed in the official documentation, don't know why it's not working.
Rahul Gupta almost 10 years

What do you mean to say by ` I need to set colors on series type level` ? How you want the colors to appear ? Do you want this : jsfiddle.net/phpdeveloperrahul/RQBLc ?
bilalshahid10 almost 10 years

What I'm saying is that when I add two or more series for type column, each series should have its own color picked from the colors array.
bilalshahid10 almost 10 years

I have updated my question and the fiddle to better clarify what I mean.
Rahul Gupta almost 10 years

I have updated my answer. You can refer the fiddle now. I have added multiple series to the column chart !
bilalshahid10 almost 10 years

Yeah that's a good solution but that doesn't still answer my question. I need plotOptions.column.colors to get to work.
Rahul Gupta almost 10 years

Well, the plotOptions.column.colors` documenation says A series specific or series type specific color set to apply instead of the global colors when colorByPoint is true. So to make it work you will have to set colorByPoint to true
Rahul Gupta almost 10 years

And after all my answer does satisfies your question as What I need to do is to set different color presets for different series types. As this is what you need finally. Am I correct ? Please consider accepting the answer if you find it helpful as it will help other users like you find a correct solution to the problem.
bilalshahid10 almost 10 years

So colorByPoint is the catch here. Accepting your answer.