CODEWITHSUNDEEP
visualizationgoogle-visualization
oligofren
oligofren

Reputation: 22923

Is it possible to get a fill in the area between two lines in Google Charts?

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:

What I want

This is what I have

What I have

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

Upvotes: 3

Views: 6686

Answers (2)

smjZPkYjps
smjZPkYjps

Reputation: 1178

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.

Upvotes: 4

Marc Polizzi
Marc Polizzi

Reputation: 9375

Never seen it but you might be able to do sth using the "interval" role.

Upvotes: 1

Related Questions