score:8

Accepted answer

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

score:0

In fact, You should use the latest highcharts.js (Highcharts JS v6.1.4 (2018-09-25)). I have fixed this using version 6x.

score:3

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.


Related Query

More Query from same tag