Google Charts upside-down area chart

Question

How to create an area chart which has both normal area and "upside-down" area?

Already looked at their docs, but didn't find a solution there.

The end result should look like this:

You can see my current status in this jsfiddle.

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Blue', 'Red'],
      ['0',  0,      20],
      ['2',  0,      20],
      ['4',  0,       20],
      ['6',  1,      19],
      ['8',  2,      18],
      ['10',  3,      17],
      ['12',  4,      16],
      ['14',  5,      15],
      ['16',  6,      14],
      ['18',  7,      13],
      ['20',  8,      12],
      ['22',  9,      11],
      ['24',  10,      10]
    ]);

    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);
  }

Please show the code you used, at least the options and sample data. I would guess you put these two series on two separate axes, and if so, you'll need to force them to have the same alignment by using viewWindow options. — dlaliberte
Sorry, I misunderstood that you wanted that end result. But given your current status (thanks) that makes it more clear. Whoever gave the downvote should reconsider, since this is a good question. — dlaliberte

dlaliberte dlaliberte · Accepted Answer · 2017-10-12T15:35:01

The Google Charts AreaChart fills the area from the data line down or up to the baseline. But baselines (currently) only apply to axes, and you effectively want two different baselines, one at the top for one series and one at the bottom for the other series, so you'll have to do some trickery to get what you want.

Basically, target each series to a different axis, each with its own baseline, and align the two axes with the same viewWindow. Like so:

var options = {
  title: 'Company Performance',
  hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
  vAxes: {
    0: {viewWindow: { min: 0, max: 20 }, baseline: 0},
    1: {viewWindow: { min: 0, max: 20 }, baseline: 20},
  },
  series: {
    1: { targetAxisIndex: 1 }
  }
};

See the update to your jsfiddle.

Google Charts upside-down area chart

1 Answers