CODEWITHSUNDEEP
javascriptcharts
Derrekito
Derrekito

Reputation: 45

How to change Google Area Chart Overlap colour or opacity?

Regarding Google Charts, is there a way to adjust the colour or opacity between two or more overlapping areas of an area chart? I've been attempting to modify Google's sample code provided at the Area Chart development website. For convenience I have provided a copy of the sample code below. Note: If there isn't an officially supported way to do this I am interested in any dirty ways to go about it too.

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2013',  1000,      400],
      ['2014',  1170,      460],
      ['2015',  660,       1120],
      ['2016',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0}
    };

    var chart = new
    google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

To help clarify what I hope to accomplish please see the following image. enter image description here

Upvotes: 1

Views: 3588

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

You can add series with different areaOpacity to your options:

...
vAxis: {minValue: 0},
series: {
    0: { areaOpacity: 0.2},
    1: { areaOpacity: 0.7}
}

Upvotes: 2

Related Questions