Highcharts - How to set custom colors for the series

charts, highcharts, javascript, jquery

Solution

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

Problem

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

Original source