i am working on google bar charts, i am stuck with adding colours to individual bars

Question

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values


var a = [['Work', 8], ['Eat', 2], ['TV', 4], ['Gym', 2], ['Sleep', 8], ['walk', 2], ['games', 2], ['chess', 2], ['drink', 4], ['dance', 6]];
a.sort(compareSecondColumn);

function compareSecondColumn(a, b) {
    if (a[1] === b[1]) {
        return 0;
    }
    else {
        return (a[1] > b[1]) ? -1 : 1;
    }
}



// Draw the chart and set the chart values
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],a[0],a[1],a[2],a[3],a[4]
        
    ]);
    // Optional; add a title and set the width and height of the chart
    var options = { 'title': 'the title', 'width': 550, 'height': 400 };
    // Display the chart inside the <div> element with id="piechart"
    var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
    chart.draw(data, options);
}

</script>

</body>
</html>

i am using bar chart, it only display default blue color.
i have used an array which removes the column which doesnot have data(like 0)
like sorting the data
i want to display individual color for each column
like red, green any different colors for each bar
i like to add annotations also
thanks in advance

check this answer for color --> cannot Change Individual Bar Color -- and this answer for annotations — WhiteHat
i tried by adding ['Task', 'Hours per Day',{ role: "style" } and{ role: 'annotation' } ]a[0],a[1],a[2],a[3],a[4] — abhi
var a = [['Work', 8,"#b87333",8], ['Eat', 2,"#b87333",2], ['TV', 4,"#b87333",4]] — abhi

WhiteHat WhiteHat · Accepted Answer · 2020-08-17T13:52:57

the column headings and values posted in the above comments seem to work fine here...

the only changes made...

add type property to style and annotation roles.
added different colors for style role.

see following working snippet...

var a = [['Work', 8, "#E53935", 8], ['Eat', 2, "#1E88E5", 2], ['TV', 4, "#43A047", 4]];
a.sort(compareSecondColumn);

function compareSecondColumn(a, b) {
  if (a[1] === b[1]) {
    return 0;
  }
  else {
    return (a[1] > b[1]) ? -1 : 1;
  }
}

google.charts.load('current', {
  packages: ['corechart']
}).then(function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day', {role: 'style', type: 'string'}, {role: 'annotation', type: 'number'}],a[0],a[1],a[2]
  ]);

  var options = {
    title: 'the title',
    width: 550,
    height: 400,
    legend: 'none'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>

i am working on google bar charts, i am stuck with adding colours to individual bars

1 Answers