Chart.js Fill line chart from another value than 0

Question

I am trying to change the value at which the filling of the blue graph is done, here 0. I would like to set it at 5 for example, but I want to keep this value to 0 for the green graph.

This is my graph currently:

This is the data I use to draw this graph:

var data = {
    labels : arrayLabels,
    datasets:[
    {
        label: "CA",
        backgroundColor: "rgba(26,179,148,0.1)",
        borderColor: "rgba(26,179,148,0.7)",
        pointBackgroundColor: "rgba(26,179,148,1)",
        yAxisID: "y-axis-CA",
        data: arrayCA
    },
    {
        label: "Marge",
        backgroundColor: "rgba(46,95,255,0.1)",
        borderColor: "rgba(46,95,255,0.7)",
        pointBackgroundColor: "rgba(46,95,255,1)",
        yAxisID: "y-axis-marge",
        data: arrayMarge,
        // -> here i would like to have something like:
        // fillFrom : 5
    }]};

I use chart.js 2, how can i do that? Thanks

score 1 · Answer 1 · edited May 23 '17 at 11:54

As far as I know there's no simple method. If you want to create a custom fill you will need to work with a plugin or write a hefty amount of code to customize it.

Back when I was looking for a similar thing I came across:

Chart JS Fill Between two lines

This doesn't do exactly what you're looking for, but you can customize your chart so that it does.

If you create a dataset where all the datapoints are at 5, then make it invisible (0 width, don't show datapoints, etc.) using basic options, you can fill between that line and the 'Merge' line.

The JSFiddle and code located in the previous answer should be everything you need to make it happen.

Thank you it works as expected, but It seems strange to me that there is no more direct and less hacky solution. — Benjamin Lucidarme, May 18 '17 at 14:24

Chart.js Fill line chart from another value than 0

1 Answers1