random background color for each array element

Question

I'm generating random color using that:

var rand = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';

and I'm mapping data:

var mappedData = data.data.map(function(item){    

    return { value: item[1], name: item[0], color: rand };
);

after which it's passed to chart.

But it generates whole chart with one color. How can I do that this change display for each chart element?

I've tried to add var bgColor = rand; inside of mappedData and then assign it to color: bgColor but it gave me same result

you need to provide more code. from what you're showing, you've assigned one color to rand. where are you iterating over your array? — devlin carnate
– devlin carnate, Commented Oct 27, 2015 at 20:23
Try this: var mappedData = data.data.map(function(item) { var rand = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')'; return {value: item[1], name: item[0], color: rand}; });. You may not be creating rand for each item! — Rayon
– Rayon, Commented Oct 27, 2015 at 20:23
from what i see, your rand variable is outside of the scope und is beeing initialized only once. You could calculate a set of random colors in advance or just put the randomizer inside the data.data.map function like this: var mappedData = data.data.map(function(item){ var rand = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')'; return { value: item[1], name: item[0], color: rand }; }); — Mensur Grišević
– Mensur Grišević, Commented Oct 27, 2015 at 21:00

Rayon · Accepted Answer · 2015-10-27 20:26:30Z

2

It seems that you are not creating rand for every item in map

Try this:

var mappedData = data.data.map(function(item) {
    var rand = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')';
    return {value: item[1], name: item[0], color: rand};
});

answered Oct 27, 2015 at 20:26

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

random background color for each array element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related