Skip to content
Advertisement

From where can I get list of all color patterns used by Google Charts?

Question is simple, by default Google Charts uses some predefined colors for factors on the charts. First four are:

  • Blue #3366CC
  • Red #DC3912
  • Yellow #FF9900
  • Green #109618

Fine. When your chart must display more factors on a chart then it takes:

  • Purple #990099
  • Sea blue #0099C6
  • Pastel pink #DD4477

Above names have been given by myself so they aren’t official but color values are. The point is what colors are next? Is the list of next colors infinite?

Can someone point me to the source where can I find all of them? I went through the whole manual and found nothing. I could render bunch of factors in the fiddle but I’m feeling that it won’t cover all possible colors.

Thank you for your help.

The reason why I want to get those color values is that I want to use C3js / D3js in a parallel with Google Charts and to keep consistency I have to provide D3 with a list of predefined colors like:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25],
            ['data3', 130, 220, 140, 200, 250, 450],
            ['data4', 250, 320, 210, 240, 215, 225],
            ['data5', 430, 500, 400, 280, 290, 350],
            ['data6', 100, 120, 310, 340, 415, 225]
        ]
    },
    color: {
        pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
    }
});

Obviously I want to replace color.pattern array with what Google Chars uses.

Thanks!

Advertisement

Answer

OK. So here’s the fiddle: http://jsfiddle.net/slick/xcpxz738/

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['factor1',     1],
    ['factor2',     1],
    ['factor3',     1],
    ['factor4',     1],
    ['factor5',     1],
    ['factor6',     1],
    ['factor7',     1],
    ['factor8',     1],
    ['factor9',     1],
    ['factor10',     1],
    ['factor11',     1],
    ['factor12',     1],
    ['factor13',     1],
    ['factor14',     1],
    ['factor15',     1],
    ['factor16',     1],
    ['factor17',     1],
    ['factor18',     1],
    ['factor19',     1],
    ['factor20',     1],
    ['factor21',     1],
    ['factor22',     1],
    ['factor23',     1],
    ['factor24',     1],
    ['factor25',     1],
  ]);

25 factors and 21st doesn’t use blue (from the 1st). I’m pretty sure that I won’t use so many factors. I case of that I will simply put more factors to this fiddle to check next colors.

I will simply use color picker to copy and paste colors to my C3. Than you mwilson anyway. I’ll give you upvote.

Advertisement