CODEWITHSUNDEEP
javascriptgoogle-visualizationbar-chart
Nicolas Raoul
Nicolas Raoul

Reputation: 60213

Google Charts bar chart: How to manually change the colour of every bar? (single series)

I have written a simple bar chart with Google Charts, one series, it works fine, all bars are blue:

Google Charts bar

Now I would like to manually set the colour of the every single bar (actually a green-to-red transition proportional to the value, to make it easier to understand what is good/bad). How can I do this?

I have tried setting colors in options as described here but for some reason it does not work in my code below.

chco seems to be what I need, but it is an URL parameter... how to elegantly integrate it in JavaScript code?

google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Product', 'Score'],
          ['NemakiWare',  288],
          ['Nuxeo',  240],
          ['FileNet',  220],
          ['SharePoint',  98]
        ]);

        var options = {
            colors: ['green','blue','pink','red'],
            legend: 'none',
            hAxis: {
                textPosition: 'none',
                minValue: 0,
                gridlines: {
                    color: 'transparent'
                }
            }
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

Upvotes: 2

Views: 1206

Answers (1)

Alex Gill
Alex Gill

Reputation: 2491

There are different ways to do this but you can use the style role.

Source: https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Product', 'Score', { role: 'style' }],
          ['NemakiWare',  288, 'green'],
          ['Nuxeo',  240, 'blue'],
          ['FileNet',  220, 'pink'],
          ['SharePoint',  98, 'red']
        ]);

        var options = {
            legend: 'none',
            hAxis: {
                textPosition: 'none',
                minValue: 0,
                gridlines: {
                    color: 'transparent'
                }
            }
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.clearChart();
        chart.draw(data, options);
      }
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

Upvotes: 3

Related Questions