How to create linear gradient with background mask in Chart.js - chart.js

Question

I would like to recreate this chart color scheme in Chart.js.
So far I've succeeded in creating the horizontal linear gradient for both the stroke and background colors, but I can't find a way to create the opacity mask for the background color to 'blend' it into the page background.
This is my chart so far
Note:
I can create an opacity mask on the canvas itself using css property:
-webkit-mask-image: -webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
But this method masks the whole lower bottom of the chart, i.e the stroke of the chart, for example
How would I go about masking only the background color of the chart?
Chart.js setup
data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
fill: true,
data: Utils.numbers(NUMBER_CFG),
borderColor: getGradient,
pointBorderColor: getGradient,
pointBackgroundColor: getGradient,
pointHoverBackgroundColor: getGradient,
pointHoverBorderColor: getGradient,
backgroundColor: getGradient
},
]
};
let width, height, gradient;
function gradient(ctx, chartArea) {
const chartWidth = chartArea.right - chartArea.left;
const chartHeight = chartArea.bottom - chartArea.top;
if (!gradient || width !== chartWidth || height !== chartHeight) {
// Create the gradient because this is either the first render
// or the size of the chart has changed
width = chartWidth;
height = chartHeight;
var gradientStroke = ctx.createLinearGradient(chartArea.right, chartArea.top, chartArea.left, chartArea.top);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(1, "#f49080");
}
return gradientStroke;
}
function getGradient(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) {
// This case happens on initial chart load
return;
}
return gradient(ctx, chartArea);
}

Answer 1

I hope you have solved that by now. In any case, I think you should try to change the values you pass to createLinearGradient function. See this example (it's not mine, but helped me to understand that).
var ctx = document.getElementById("chart").getContext("2d");
/*** Gradient ***/
var gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'rgba(250,174,50,1)');
gradient.addColorStop(1, 'rgba(250,174,50,0)');
/***************/
var data = {
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: [
{
fillColor : gradient, // Put the gradient here as a fill color
strokeColor : "#ff6c23",
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,
tooltipFillColor: "rgba(0,0,0,0.8)",
tooltipFontStyle: "bold",
tooltipTemplate: "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>",
scaleLabel : "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>"
};
var myLineChart = new Chart(ctx).Line(data, options);
<canvas id="chart" width="800" height="400"></canvas>