ruruskyi ruruskyi - 1 year ago 289
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

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 Source

you can use a 'style' column role

available styles are...


see following working snippet...

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

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=""></script>
<div id="chart_div"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download