Search code examples
chartsgoogle-visualizationbar-chart

How to assign bar colors in Google bar chart

I have a chart built from two data series, each having 2 values. How can I make the bar representing the first value in the first series have a different color than the bar representing first value in the second series.

Here's how I'm setting up the series.

chartData[0] = ['Type', 'Scheduled', 'Actual', {role: 'style'}]
                chartData[1] = ['Today', data['exchanges']['Planned']['Today'], data['exchanges']['Actual']['Today'], ''];
                chartData[2] = ['Overdue', data['exchanges']['Planned']['Overdue'], data['exchanges']['Actual']['Overdue'], ''];

Then I set the series option like this:

series: [{color: "#001E60"}, {color: "#BDC667"}]

This sets the same color for the first bar for both series like this:

enter image description here .
What I would like to do is set the color of the Overdue bar with color #001E60 to red but can't figure out how to do it.

Solution

  • as you discovered, both the colors and series options color the series the same.

    you must use the style role to color bars in the same series different colors.

    the style role column must follow the series column it should be applied to.

    you have included the style role in your example, but is included only for one series, and it is blank.

    chartData[0] = ['Type', 'Scheduled', {role: 'style'}, 'Actual', {role: 'style'}]
  chartData[1] = ['Today', data['exchanges']['Planned']['Today'], 'red', data['exchanges']['Actual']['Today'], 'green'];
  chartData[2] = ['Overdue', data['exchanges']['Planned']['Overdue'], 'blue', data['exchanges']['Actual']['Overdue'], 'green'];