How Can I Add Different Colors To Bar In Column Chart

How can i add different colors to Bars in Column chart. Adding colors field in option is not working. Please help. Below is the code snippet: tdata.addRow([col1, arr[0].Manual])

Solution 1:

the colors option applies colors to each series so if you have 3 colors you would need 3 y-axis columns

as follows...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    ['A', 100, 120, 130]
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    colors: ['red', 'green', 'blue']
  });
});

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>

---

to color individual columns within a series, use a 'style' column role

as follows...

note: using a 'style' column role will invalidate the legend

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y', {role: 'style', type: 'string'}],
    ['A', 100, 'red'],
    ['B', 120, 'green'],
    ['C', 130, 'blue']
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    legend: 'none'
  });
});

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>

Solution 2:

This is answer according to google document, use color property instead of background color.

var options = {   width: 400,   height: 240,   title: 'Toppings I Like On My Pizza',   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'] };

chart.draw(data, options);

you can find more here