Chartist.js make fill area expand all the way to the right

Question

I'm using showArea: true but can't find the appropriate setting to make that fill all the way. Example:

I assume this is because I don't have any data points after where it ends, but I don't want the green line to extend all the way across the top. Is there another way to accomplish this?

Answer 1

You're using showArea:true to render the area. But as you've noted, showArea fills the area associated only with the drawn line.

What you're looking for is an additional area without a line.

In order to achieve this effect, you'll need to create two different lines: The first line will have showArea: false and extend to W3 as shown in your example. This will render the light green line as you have already.

The second line will be invisible have showLine: false and showArea: true and extend all the way across the top to W8.

In other words, you're actually looking to render two different things. One is a line, and one is a fill area.