Highcharts column drilldown colors exhausted after 9 columns?

Question

I'm working on highcharts column drilldown, I'm struck at a point where if the no. of columns is more than 9, highcharts is not generating new colors. Am I missing something here?

Highcharts.getOptions().colors

returns 9 colors.

Example here: http://jsfiddle.net/C96tE/1/

score 0 · Answer 1 · answered Jan 06 '13 at 08:08

0

See this: http://jsfiddle.net/C96tE/2/

Use :

 Highcharts.setOptions({
 colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4', '#EAEAEA', '#666999', '#006699']
});

answered Jan 06 '13 at 08:08

Anujith

9,370
6
33
48

This would work if the number of columns is static, mine is a dynamic one . Random color generation is what looks to be an option. I wonder if highcharts has any method that would give me a list of unique colors if I pass a number. – gsk Jan 06 '13 at 08:17

score 0 · Accepted Answer · edited May 23 '17 at 11:56

I used a Java function to generate colors based on a single color. It basically takes a color - converts it into HSV and adds a step to the Hue. Saturation and Value are pretty fixed with a bit of randomness to get variation. I guess the function could be improved but it produces pretty colors :)

 private Color getNextColorHue(Color color){
    if(color != null){
        float hsbVals[] = Color.RGBtoHSB( color.getRed(), color.getGreen(), color.getBlue(), null );
        hsbVals[0] += STEP;
        hsbVals[1] = (float) ((Math.random() * 0.3) + 0.7);
        hsbVals[2] = (float) ((Math.random() * 0.2) + 0.7);

        if (hsbVals[0] > 1) {
            hsbVals[0] -= 1;
        }
        color = Color.getHSBColor(hsbVals[0], hsbVals[1], hsbVals[2]);
    }
    return color;
}

Should be easy to convert it into JS with this: RGB to HSV color in javascript?

Highcharts column drilldown colors exhausted after 9 columns?

2 Answers2