React-chartjs-2: Line Chart background gradient

Created on 5 Jul 2018  路  2Comments  路  Source: reactchartjs/react-chartjs-2

I am using Line Chart now and I need to display a gradient background just like this
image
Then I find a chart.js2 demo in jsfiddle, and that's the way I wanted to display.
chartjs2 demo
So I migrated it to react-chartjs version. Here's my code

const MyLine = (props) => { 
    const {width, height} = props;

    const data = (canvas) => {
        const ctx = canvas.getContext("2d");
        const gradient = ctx.createLinearGradient(0, 0, 0, height);
        gradient.addColorStop(0, 'rgba(250,174,50,1)');   
        gradient.addColorStop(1, 'rgba(250,174,50,0)');

        return {
            labels: ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
            datasets: [
                {
                    backgroundColor : gradient, // Put the gradient here as a fill color
                    borderColor : "#ff6c23",
                    borderWidth: 2,
                    pointColor : "#fff",
                    pointStrokeColor : "#ff6c23",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#ff6c23",
                    data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,-24.1,20.0,-18.4,19.1,17.4]
                }
            ]
        }
    }

    var options = {
        responsive: true,
        datasetStrokeWidth : 3,
        pointDotStrokeWidth : 4,
        scaleLabel : "<%= Number(value).toFixed(0).replace('.', ',') + '掳C'%>"
    };

    const divStyle = {
        width: width,
        height: height
    };


    return (
        <div className="line-chart" style={divStyle}>
            <Line 
                data={data} 
                options={options}
            />
        </div>
    )
}

And I got something like this
image
The gradient background did not end in the bottom of the chart but in x axis. I really don't know why this happened. Does anybody know?

Most helpful comment

In my case, I used fill:'start'

      datasets: [
        {
          fill:'start',
          backgroundColor: gradient,
          ...
        }
     ]

All 2 comments

Just found out 'fill' property in options. See Area Charts

In my case, I used fill:'start'

      datasets: [
        {
          fill:'start',
          backgroundColor: gradient,
          ...
        }
     ]
Was this page helpful?
0 / 5 - 0 ratings