Google Chart (Material) - Type Bar - Data in array

Question

I want to use a google bar chart (material design) with the options provided in the arrayToDataTable to customize the color of the bar.

Example:

return google.visualization.arrayToDataTable([
      ['1', '2', {role: 'style'}],
      ['1', 1000, '#000000'],
      ['2', 1170, '#000000'],
      ['3', 660, '#000000'],
      ['4', 1030, '#000000']
    ]);

As you can see, if I refer to the documentation, the bar should be in black.
It is not.
Moreover, this third column is not added (so something catch it as an role, but do not execute associated behavior).

I saw multiples topics about it nevertheless they were working with old packages (not material design).

Thanks for the help guys.

Update 1:

• Replaced #00000 color to #000000 (doesn't solve the problem, I just forgot a 0 when writing this example)

Answer 1

unfortunately, column roles do not work with material charts

along with several configuration options

recommend using core chart instead

there is a configuration option that will style a core chart as material

theme: 'material'

but it's not exact, see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart(transparent) {
  var data = google.visualization.arrayToDataTable([
    ['1', '2', {role: 'style'}],
    ['1', 1000, '#000000'],
    ['2', 1170, '#000000'],
    ['3', 660, '#000000'],
    ['4', 1030, '#000000']
  ]);

  var options = {
    legend: 'none',
    theme: 'material'
  };

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

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

also, the style column value for black should have six zeroes vs. five

--> '#000000'

vs.

--> '#00000'