CODEWITHSUNDEEP
chartsgoogle-visualization
Paulo Costa
Paulo Costa

Reputation: 1635

Material design google charts change color column

When using Google charts, usually you can change the colors of individual columns by using the "role: style" function, but when I attempt it with the new material design charts I only get blue columns.

 google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['', '', { role: 'style' } ],
      ["Strongly disagree", 0, 'color: black'],
      ["Disagree", 0, 'color: #000000'],
      ["Neutral", 6, 'color: #212121'],
      ["Agree", 45, 'color: #212121'],
      ['Stongly agree', 98, 'color: black']
    ]);

    var options = {
      title: 'Instructor presented the subject matter clearly',
      width: 900,
      legend: { position: 'none' },
      chart: { subtitle: 'General physics 221 CSUSB winter 2017' },
      axes: {

      },

      bar: { groupWidth: "90%" }
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));
  };

Upvotes: 1

Views: 868

Answers (1)

Jorge Omar MH
Jorge Omar MH

Reputation: 501

You can try with netx code:

 google.charts.load('current', {packages: ['corechart', 'bar']});
  google.charts.setOnLoadCallback(drawColColors);

  function drawColColors() {
    var data = new google.visualization.arrayToDataTable([
      ['', '', { role: 'style' } ],
      ["Strongly disagree", 12, 'brown'],
      ["Disagree", 30, 'gray'],
      ["Neutral", 26, 'blue'],
      ["Agree", 45, 'color: #F05921'],
      ['Stongly agree', 58, 'black']
    ]);

    var options = {
      title: 'Instructor presented the subject matter clearly',
      width: 900,
      legend: { position: 'none' },
      chart: { subtitle: 'General physics 221 CSUSB winter 2017' },
      axes: {

      },

      bar: { groupWidth: "90%" }
    };

    //var chart = new google.charts.Bar(document.getElementById('chart_div'));
    // Convert the Classic options to Material options.
    //chart.draw(data, google.charts.Bar.convertOptions(options));
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
  };
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

Upvotes: 1

Related Questions