Highcharts - How to set custom colors for the series

Question

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

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

Answer 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.