Question

I cannot see any examples in the Google Charts API that will demonstrate how I can create a a fill color in the area between two charts. In my case this fill color should fill the area that represents the spread between worst and best outcome.

This is what I want:

This is what I have

Any ideas on how this is could be done (if at all!)?

Answer 1

I was able to come very close to recreating your desired chart by using a stacked AreaChart and some creative thinking. Plug the following code into the Code Playground:

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['a',    'b',   'c',   'd'],
    ['1',    100,   10,    10],
    ['10',   250,   150,   50],
  ]);

  var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
  ac.draw(data, {
    isStacked: true,
    series: [{color: 'white', lineWidth: 0}, {color: 'purple'}, {color: 'purple', lineWidth: 0}],
    legend: {position: 'none'},
  });
}

​The keys are to have the bottom/first series color be the same as the background of the chart and to have the last/top series not have a line width. Both of these are controlled by the series parameter. The catch is that since the series are stacked, you’ll have to subtract the values of the lower series to get the right number. For example, if you want the lowest line at 250, the middle/dark purple line at 400, and the top line at 450, you’d have to use the values 250, 150, and 50.