Skip to content Skip to sidebar Skip to footer
Home / Charts / Google Visualization / Javascript

Coloring Google Stepped Area Charts?

Post a Comment
is it possible to color each step indivual? Now all steps are blue but I want the first step blue, second yellow, third red, ...
column role

see following working snippet... 

google.charts.load('current', {
  callback: function () {

    var data = google.visualization.arrayToDataTable([
      ['Step', 'Equity', {role: 'style'}],  // <-- define style column
      ['1', -40, 'blue'],
      ['2', -40, 'yellow'],
      ['3', -40, 'red'],
      ['4', -40, 'green'],
      ['5', -30, 'purple'],
      ['6', -30, 'orange'],
      ['7', 10, 'cyan'],
      ['8', 10, 'indigo'],
      ['9', 10, 'magenta'],
      ['10',50, 'lime']
    ]);

    var options = {
      legend: 'none',
      vAxis: { ticks: [{v:-50, f:'0%'}, {v:0, f:'50%'}, {v:50, f:'100%'}] },
      enableInteractivity: false,
      hAxis: { textPosition: 'none' },
      chartArea:{top:10,left:40,bottom:10,right:5, width:"100%",height:"100%"},
    };

    var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  },
  packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

You may like these posts

Post a Comment for "Coloring Google Stepped Area Charts?"