Fill the area between two lines

33 views
Skip to first unread message

Haseeb Z

unread,
Apr 1, 2020, 9:57:18 AM4/1/20
to Google Visualization API
I need to fill the area between two parallel lines on a line chart. 

I have tried combo chart with line and area charts to achieve this, but I am unable to find any help regarding setting vertical axis boundaries for the area chart.

Daniel LaLiberte

unread,
Apr 1, 2020, 10:11:36 AM4/1/20
to Google Visualization API
Hi Haseeb,

There are two tricks you can use to fill the area between two lines (as in line segments between points).  

1. You can use a stacked area chart with 2 series, and set the fill opacity of the lower series to 0.

2. You can use an unstacked area chart with 1 series where you extend the first line with points of the second line in reverse order to complete a closed polygon back to the first point of the first line.  This will fill the area inside the polygon, surprisingly.

On Wed, Apr 1, 2020 at 9:57 AM Haseeb Z <has...@ulula.com> wrote:
I need to fill the area between two parallel lines on a line chart. 

I have tried combo chart with line and area charts to achieve this, but I am unable to find any help regarding setting vertical axis boundaries for the area chart.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/63a5e6c2-4566-4021-8390-b1abd2cb98fb%40googlegroups.com.


--

Haseeb Z

unread,
Apr 1, 2020, 10:43:27 AM4/1/20
to Google Visualization API
Hi Daniel,

thanks for a prompt response. My objective is to achieve XmR chart. For that, I have to show moving range (mR) in the form of a shaded area.
Your tricks seems to be perfect. Can you please share some example fiddle or codepen with a working sample of areachart with boundaries.

Thanks.

Daniel LaLiberte

unread,
Apr 1, 2020, 11:56:40 AM4/1/20
to Google Visualization API
Another way that is probably more appropriate is to use the intervals feature, specifically the 'area' interval.  See documentation, which includes code examples, at:   https://developers.google.com/chart/interactive/docs/gallery/intervals#area-intervals

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages