Fill between lines

[201flaviosilva]

Hey there,

Is there any way to fill the space between two lines in a Line chart?

• Here is the example of my project: https://jsfiddle.net/201flaviosilva/a4gmr3o9/16/
• As in this example: https://stackoverflow.com/questions/57421334/plotly-py-fill-between-lines-different-color-por-positive-negative

[kurkle]

Yes, first you need 2 lines (your code sample in fiddle only contains one line). Then you configure the filler plugin to fill one or other to the other.
Some link to relevant samples and documentation:
https://www.chartjs.org/docs/latest/samples/area/line-datasets.html
https://www.chartjs.org/docs/latest/charts/area.html

[201flaviosilva]

first you need 2 lines (your code sample in fiddle only contains one line)

Sorry, I passed the wrong version: https://jsfiddle.net/201flaviosilva/a4gmr3o9/16/

Then you configure the filler plugin to fill one or other to the other.

Really thanks, for the amazing help 😁

[EwoutH]

Slightly related, I would like to create a plot like this using Chart.js (and be updated every time step)

It shows the distribution of wealth of a simulated population over time. All code to generate this plot is over here.

Any tips for creating this with Chart.js? Especially on stacking the different bands on top of each other.