ruruskyi ruruskyi - 6 months ago 68
Javascript Question

Different colour of fill and stroke in Google area chart

Please, look at the image below.

enter image description here

What I need is to have yellow colour instead of grey but it seems that in Google area charts the fill colour is always the same as the colour of the stroke, you can only specify areaOpacity which is 0.5 in this particular case.

See this image now:

enter image description here

I can change manually the fill colour of the

<path>
element but it does not seem to be exposed in chart API. At least, I went through Q&A sites and documentation and didn't find it; hope I didn't overlook it. Could someone tell if you had similar issue and whether workaround exists?

Answer

you can use a 'style' column role

available styles are...

color
opacity
stroke-width
stroke-color
stroke-opacity
fill-color
fill-opacity

see following working snippet...

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

function drawChart() {
  var areaStyle = 'fill-color: #ffeb3b; stroke-color: #b71c1c; stroke-width: 8;';

  var dataTable = new google.visualization.DataTable({
    cols: [
      {label: 'Year', type: 'string'},
      {label: 'Sales', type: 'number'},
      {role: 'style', type: 'string'}
    ],
    rows: [
      {c:[{v: '2013'}, {v: 1000}, {v: areaStyle}]},
      {c:[{v: '2014'}, {v: 1200}, {v: areaStyle}]},
      {c:[{v: '2015'}, {v: 1400}, {v: areaStyle}]},
      {c:[{v: '2016'}, {v: 1800}, {v: areaStyle}]}
    ]
  });

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(dataTable, {
    areaOpacity: 1.0,
    legend: {
      position: 'none'
    }
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>