Gradient halo under the curve using Chart.js

Let's assume that you want to create a line-graph with a gradient halo. The first step is to create a canvas in HTML:

html
<canvas id = 'Gradient'><canvas/>

Now it'ts time to use Chart.js to fill the line under the curve with a gradient:

javascript
import Chart from 'chart.js';

// Getting the canvas element
let canvas = document.getElementById('Gradient');
let ctx    = canvas.getContext('2d');

// Creating a linear gradient
let gradient = ctx.createLinearGradient(0, 0, 0, 300);

// Defining colors of the gradient
gradient.addColorStop(0, 'rgba(0, 210, 255, 0.7)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

After defining the gradient, it's time to define the rest of the properties:

javascript
// Defining the rest of the properites
let properties = {
    drive: null,
    type: 'line',
    data: {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [{
            label: 'Weather',
            backgroundColor: gradient,
            borderColor: 'rgba(0, 210, 255, 1)',
            pointBorderWidth: 3,
            pointHoverRadius: 3,
            pointHoverBorderWidth: 1,
            pointRadius: 2,
            data: ['25', '30', '35', '27', '29', '23', '24']
        }]
    }
};

Finally, starting the graph:

javascript
new Chart(ctx, properties);

And here is the result: