Color grouped bars slightly different in HighCharts

Question

I have a grouped HighCharts bar chart that is colored by group. For example all bars in group 1 are blue, group 2 is gray, group 3 is green. Now I just need to have slight variations of color within each group. So group 1 would have a dark blue bar, regular blue bar, and a light blue bar. Then group 2 would have dark gray, regular gray, and light gray. I can't figure out how to get those color variations within each group. Thanks to anyone in advance for looking into this.

$(function () {
var pWidth = 20, // points width
    pPadding = 5, // point padding
    gPadding = 15, // group padding
    categories = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    series = [{
        name: 'Year 1800',
        data: [107, 55, 635, 203, 30],
        color: 'red'
    }, {
        name: 'Year 1900',
        data: [133, 156, 550, 408, 45]
    }, {
        name: 'Year 2008',
        data: [500, 604, 404, 632, 60]
    }],
    sLen = series.length,
    cLen = categories.length;

var catWidth = 2 * gPadding + sLen * (pPadding + pWidth); 
// 2*gPadding = left group padding + right group padding
// sLen * pPadding = distance between points
// sLen * pWidth  = space taken by points itselves
// cat width = one category width/height

var height = catWidth * cLen;
var groupPadding = gPadding / catWidth;

$('#container').highcharts({
    chart: {
        height: height,
        type: 'bar',
        marginLeft: 0,
        marginRight: 0,
        marginTop: 0,
        marginBottom: 0,
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: categories,
        title: {
            text: null,
        },
        labels: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: null,
        },
        labels: {
            enabled: false
        }
    },
    plotOptions: {
        bar: {
            pointWidth: pWidth,
            groupPadding: groupPadding
        },
        series: {
            colorByPoint: true
        }
    },
    legend: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    series: series
});

});

Here is a fiddle.

Mark Mark · Accepted Answer · 2014-05-30T20:08:18

You can specify each color in the point configuration.

Instead of:

data: [107, 55, 635, 203, 30],

Use:

data: [{y: 107, color: 'someColor'}, {y: 55, color: 'someColor'}, {y: 635, color: 'someColor'}, {y: 203, color: 'someColor'}, {y: 30, color: 'someColor'}],

Here's an updated fiddle where I've done the first group with shades of blue.

Color grouped bars slightly different in HighCharts

1 Answers