Filling in the area under a line in a line chart

[willsoto]

Looking through the API I don't see anything exposed for this functionality. (For an example of what I am looking for, please check out the example at the bottom of this page - this is a stacked area chart, but conceptually they are similar)

Attempting to do this naively via CSS (by adding a fill to the line in question) only rendered the fill above or below the line.

Any plans to implement this functionality or perhaps provide an example for how this effect can be achieved?

Thanks in advance

[gionkunz]

Yep, this was planned! I think we should do this in the line chart. This is something that is considered to be next on the plate besides the Accessibility efforts. It's a matter of drawing the full shape including the points for the bottom part of the fill area. If you've got some time feel free to take this one 😃 If no one finds time to pick this up until the weekend, I'll probably spend some time with this by then.

[VinSpee]

any movement on this? I'd love to see it happen!

[willsoto]

@VinSpee I was not able to get to it, but I do have an interest in tackling it. I will definitely try and make some time this weekend.

[RVMendoza]

Yeah totally this is something I would use immediately

[gionkunz]

Good news guys 😄 As I had a bit spare time this evening and I wanted to add this feature for a long time, I've just implemented a first version. I've added areas with 73c83d1 and I just pushed Chartist 0.1.15. It includes Line charts with the options to create area shapes. Checkout the live examples http://gionkunz.github.io/chartist-js/examples.html

You can enable them to be rendered by Chartist and style them via CSS / SASS. By default the styles are generated with the default colors in sass and an additional fill-opacity that is 0.2 by default. Just play around in the live examples a bit :-) I hope you like it. I think it's cool and keeps the Chartist simplicity attitude :-)

@Paradox41 , sorry man I hope you didn't put effort into this already.

Cheers
Gion

[willsoto]

@gionkunz Nice! No I didn't. The weekend was not very conducive to side projects unfortunately. Glad to see you got it implemented.

[RVMendoza]

Yessssss that's incredible @gionkunz!

[RVMendoza]

@gionkunz could you please post the new version on npm?

[RVMendoza]

for now until it's published on npm, here's is the command:

npm i -D git://github.com/gionkunz/chartist-js.git#8e1bf71

[gionkunz]

Hi

Sorry I missed to publish it yesterday! It's published now + chartist@0.1.15