I am using Line Chart now and I need to display a gradient background just like this

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

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?
Just found out 'fill' property in options. See Area Charts
In my case, I used fill:'start'
datasets: [
{
fill:'start',
backgroundColor: gradient,
...
}
]
Most helpful comment
In my case, I used
fill:'start'