CODEWITHSUNDEEP
javascriptangularjschartsgoogle-visualization
mrkibzk
mrkibzk

Reputation: 227

Google visualisation charts - colors

I am working on project were I have to put different colors on the graph, between some zone's. I want color in blue , red , yellow, green

This is my result

I want something like this

This is my code

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

function drawStuff() {
    var data = google.visualization.arrayToDataTable([
        ['Week', 'Zone 0 - 60%', 'Zone 60 - 70%', 'Zone 70 - 80%', 'Zone 80 - 90%', 'Zone 90% +'],
        ['W45', 10, 24, 20, 32, 18],
        ['W46', 16, 22, 23, 30, 16],
        ['W47', 28, 19, 29, 30, 12],
        ['W48', 26, 25, 23, 10, 16],
        ['W49', 28, 19, 29, 40, 12],
        ['W50', 16, 22, 23, 30, 16],
        ['W60', 28, 19, 29, 30, 12],
        ['W61', 26, 25, 23, 10, 16],
        ['W62', 28, 19, 29, 40, 12],
        ['W63', 16, 22, 23, 30, 16],
        ['W64', 28, 19, 29, 30, 12],
        ['W65', 26, 25, 23, 10, 16],
        ['W66', 28, 19, 29, 40, 12],
        ['W67', 28, 19, 29, 30, 12],
        ['W68', 26, 25, 23, 10, 16],
        ['W69', 28, 19, 29, 40, 12],
        ['W70', 16, 22, 23, 30, 16],
        ['W71', 28, 19, 29, 30, 12],
        ['W72', 26, 25, 23, 10, 16],
        ['W73', 28, 19, 29, 40, 12]
    ]);

    var options = {
        width: '100%',
        height: '100%',
        chartArea: {
            width: '90%',
            height: '80%',
        },
        bar: { groupWidth: '75%' },
        isStacked: true
    };

    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: 55

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

use a classic chart, instead of a material chart

classic --> packages: ['corechart'] + google.visualization.ColumnChart

material --> packages: ['bar'] + google.charts.Bar

material charts are limited when it comes to available options for styling
see for options not available for material --> Tracking Issue for Material Chart Feature Parity

there is an option to style a classic chart similar to material 

theme: 'material'

see following working snippet... 

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

function drawStuff() {
  var data = google.visualization.arrayToDataTable([
      ['Week', 'Zone 0 - 60%', 'Zone 60 - 70%', 'Zone 70 - 80%', 'Zone 80 - 90%', 'Zone 90% +'],
      ['W45', 10, 24, 20, 32, 18],
      ['W46', 16, 22, 23, 30, 16],
      ['W47', 28, 19, 29, 30, 12],
      ['W48', 26, 25, 23, 10, 16],
      ['W49', 28, 19, 29, 40, 12],
      ['W50', 16, 22, 23, 30, 16],
      ['W60', 28, 19, 29, 30, 12],
      ['W61', 26, 25, 23, 10, 16],
      ['W62', 28, 19, 29, 40, 12],
      ['W63', 16, 22, 23, 30, 16],
      ['W64', 28, 19, 29, 30, 12],
      ['W65', 26, 25, 23, 10, 16],
      ['W66', 28, 19, 29, 40, 12],
      ['W67', 28, 19, 29, 30, 12],
      ['W68', 26, 25, 23, 10, 16],
      ['W69', 28, 19, 29, 40, 12],
      ['W70', 16, 22, 23, 30, 16],
      ['W71', 28, 19, 29, 30, 12],
      ['W72', 26, 25, 23, 10, 16],
      ['W73', 28, 19, 29, 40, 12]
  ]);

  var options = {
      width: '100%',
      height: '100%',
      chartArea: {
          width: '90%',
          height: '80%',
          top: 48
      },
      bar: { groupWidth: '75%' },
      isStacked: true,
      theme: 'material',
      legend: {
          maxLines: 2,
          position: 'top'
      }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="top_x_div"></div>

Upvotes: 1

Related Questions