Assign a color to every value in Javascript using HighCharts

Question

I have to make charts for a list of components(on y axis). I am using HighCharts. This is how a part of my javascript code looks like when I am trying to prepare the chart:

 series: $.map(data, function (row) {
        return ({
            name: component,
            data: data,
            color: getRandomColor()
        })
    }

getRandomColor well, gets a random hexcode. Everything works fine. The problem is instead of the colors being random, I want them to be fixed with each component. One way is to hardcode a map, but I, being lazy, am trying to avoid it. Second, is hash the component string and use that as a seed in my getRandomColor function but the components are actually very similar strings (both forward and reverse), hence, the color range obtained is very small. Is there an elegant way or a 'HighCharts' way in which I can fix a color with a component?

You can use this http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript — Subhra Sekhar Mukhopadhyay, Oct 28 '14 at 08:33
@SubhraSekharMukhopadhyay it uses Random functions again. I suggest using that string hash and maybe multiply or power it enough that that the color range increases. Multiplying even by 2 can greatly change your hash. — Raein Hashemi, Oct 28 '14 at 08:48
@SubhraSekharMukhopadhyay I am using the above function as 'getRandomColor()', My problem is to get a component-dependent color attachment. — Core_Dumped, Oct 28 '14 at 08:52

score 0 · Accepted Answer · answered Oct 28 '14 at 12:33

0

As Raeen pointed out, multiplying the hash by two or three broadens the range significantly and that worked for me.

answered Oct 28 '14 at 12:33

Core_Dumped

4,577
11
47
71

Assign a color to every value in Javascript using HighCharts

1 Answers1