Random fill colors in Chart.js

Question

I have been using nvd3 for a long time. In nvd3 we have an option to specify automatic graph fill colors.

chart.barColor()

How can I fill random colors in Chart.js graphs without defining each color in datasets?

I don't want to use JavaScript function to generate and get random colors from it. I need something similar to nvd3 barColor()

If there is a possible way, then please help me out.

You could check my answer at [#48589545](https://stackoverflow.com/questions/28828915/how-set-color-family-to-pie-chart-in-chart-js/48589545#48589545) — Conny Olsson, Feb 02 '18 at 23:20

score 12 · Answer 1 · edited May 16 '18 at 01:37

12

        function getRandomColor() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++ ) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
                }

Then set:

fillcolor = getRandomColor()

edited May 16 '18 at 01:37

ItsPronounced

5,475
13
47
86

answered Aug 14 '17 at 13:27

Silvan Vogel

131
1
2

1

OP has specifically asked that he does not want a function that randomly generates colors. – N. Ivanov Aug 14 '17 at 13:40
6

It is useful despite the question didn't asked for that. – Kanabos Apr 10 '18 at 18:26

score 5 · Answer 2 · edited May 23 '17 at 10:33

5

I am afraid there just is no in-built function in chart.js library for doing this. And what is the harm in defining your own javascript function anyways?

The implementation would look pretty much similar to what you are looking for, except that you would have defined what barColor() would do yourself.

If you haven't found them already, there are a couple of great solutions here. (using JavaScript functions)

edited May 23 '17 at 10:33

Community

1
1

answered Jul 06 '15 at 11:25

Swanky Coder

862
1
8
23

Thank you very much for you answer. The problem I have is that I have no fixed quantity that how many bars (taking example of bar-graph) could be there in the graph. So I can not define a fixed number of colors. – Aditya Chaudhary Jul 06 '15 at 19:17
In that case... what you can do is write a function which generates colors randomly starting from a selected color, not repeating the colors. I can edit my answer accordingly if you'd like :) – Swanky Coder Jul 06 '15 at 19:27

Random fill colors in Chart.js

2 Answers2

Linked