Chart.js: Fill area from lower value

[sweety-wo]

ChartJS v2.1.6
How to fill/start from min value ?

[etimberg]

Duplicate of #2380

[sweety-wo]

I think you don't get my point,

Data is something like:
data: [
[60, 60, 60, 60, 60, 60, 60], // Max range line-chart
[-50, -50, -50, -50, -50, -50, -50], // Min range line-chart
[20, 20, 20, 20, 20, 20, 20] // value line-chart
],

When the chart generates they fill from beginning at '0',
I want to fill the value from -50 to 20 (bottom to top)

[etimberg]

Sorry about that. That is currently not possible

[tristangio]

Maybe this plugin (not official) to fill between 2 lines : https://jsfiddle.net/ke5n5LnL/2/ will do the job.
I'm not the developer of this, I found it here.
The only drawback is when disabling line (by user click on legend) the fill is still on the graph though it should be fixable but I'm a little bit new to chartjs, and don't know exactly how to do it.
I will love to see an option to fill between 2 line in chartjs.

[etimberg]

@Eurecam-Tristan fill between 2 lines is in progress for v2.6. @simonbrunel has some changes that will achieve this for 😄

[tristangio]

Awesome ! I will wait for 2.6 and test it.
Thanks for your follow up so fast.
I just looked at simonbrunel work (this) and if I can make a suggestion : by default when user disable a line (by clicking on legend) the fill should disappear from the graph. Don't know if it's hard to do.

[simonbrunel]

@Eurecam-Tristan didn't know about the stackoverflow plugin :)

Mine was a quick draft in response of this question, far from being fully functional and never really tested. The new one is more flexible (see this example) and should fully replace the current 'fill' implementation.

I hope it will fulfill your case :)

[tristangio]

Wow the chartjs team is really very fast to take into account requests (really guys you impressed me : you answer so quickly)
Thanks @simonbrunel your work seems robust. I will give it a try as soon as i can on a mixed bar + line chart.

[simonbrunel]

@sweety-wo #4008 should provide what you need to implement your chart:

datasets: [{
    // Max range line-chart
    data: [60, 60, 60, 60, 60, 60, 60],
    backgroundColor: '#729D9C',
    fill: '+2'   // fill to the second dataset from this one (min range)
}, {
    // Value line-chart
    data: [20, 20, 20, 20, 20, 20, 20],
    fill: false
}, {
    // Min range line-chart
    data: [-50, -50, -50, -50, -50, -50, -50],
    fill: false
}]

More details in this comment :)

[NickolasBenakis]

Hello All,
I have a line chart
And I want to change the fill to be always directed to bottom and not to the top for the negative values.
Maybe the issue here is that The Origin is the 0 ...
I am lost with the current documentation and some closed issues are not helping,

when i set mode : 'above' or mode: 'all' nothing happens