set color of grouped stacked column in highcharts

Question

I have a requirement to set the color of stack column chart in relation with previous stack. Consider this fiddle. http://jsfiddle.net/0n7g4a1e/

series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2],
        stack: 'Actual'
    }, {
        name: 'John',
        data: [3, 4, 4, 2, 5],
        stack: 'Budget'
    }]

If Jane - Actual is light green, Jane - Budget should be dark green. This should be for all categories, Apple through bananas. similarly if John - Acutal is light blue, John - budget should be dark blue.

How can this be done? I dont want to specify each point color, i am fine with automatic color that gets selected, just that the bugdet series should have a shade darker than the actual.

Thanks.

Answer 1

You need to set colors for Highcharts in that way, for example, basing on default colors:

var colors = Highcharts.getOptions().colors.slice(0), // get default colors
    dark = -0.5;


colors[1] = Highcharts.Color(colors[0]).brighten(dark).get(); // using Highcharts.Color(), get darker golor, using first color as base

colors[3] = Highcharts.Color(colors[2]).brighten(dark).get();

Now just set this colors:

$('#container').highcharts({

    chart: {
        type: 'column'
    },

    colors: colors,

Demo: http://jsfiddle.net/0n7g4a1e/2/