backgroundColorof a linechart doesn't fill with a gradient on default

[Hedva]

I'm not quite sure what the problem is. But when I try to fill the the space under the line of a line chart with a gradient, it only shows 1 color, until hovering a point on the graph. The it shows the gradient.

Here is a codepen: https://codepen.io/anon/pen/bMwopB?editors=1010

As you can see, only when interacting with a point on the chart, the background gradient/color shows. But on default it only fills with one color (the first color of the array).

I used this example: https://codepen.io/jordanwillis/pen/BWxErp
But the problem is; this example only works for Chartjs 2.5.0
Using the 2.6.0, 2.7.0, 2.7.2 library breaks the chart.
And I don't really want to use 2 chartjs libraries.

	Chart.defaults.multicolorLineArea = Chart.defaults.line;
	Chart.controllers.multicolorLineArea = Chart.controllers.line.extend({
	    draw: function(ease) {
	        var
	            startIndex = 0,
	            meta = this.getMeta(),
	            vm = meta.dataset._view,
	            points = meta.data || [],
	            colors = this.getDataset().colors,
	            area = this.chart.chartArea,
	            backgroundColors = this.getDataset().backgroundColor,
	            minX = points[0]._model.x,
	            maxX = points[points.length - 1]._model.x,
	            ctx = this.chart.ctx,
	            linearGradient = ctx.createLinearGradient(minX, 0, maxX, 0),
	            originalDatasets = meta.dataset._children
	            .filter(function(data) {
	                return !isNaN(data._view.y);
	            });

	        function _setColor(newColor, meta) {
	            meta.dataset._view.borderColor = newColor;

	        }

	        function roundNumber(num, scale) {
	            var number = Math.round(num * Math.pow(10, scale)) / Math.pow(10, scale);
	            if (num - number > 0) {
	                return (number + Math.floor(2 * Math.round((num - number) * Math.pow(10, (scale + 1))) / 10) / Math.pow(10, scale));
	            } else {
	                return number;
	            }
	        };

	        if (!colors) {
	            Chart.controllers.line.prototype.draw.call(this, ease);
	            return;
	        }

	        for (var i = 2; i <= colors.length; i++) {
	            if (colors[i - 1] !== colors[i]) {
	                _setColor(colors[i - 1], meta);
	                meta.dataset._children = originalDatasets.slice(startIndex, i);
	                meta.dataset.draw();
	                startIndex = i - 1;
	            }
	        }

	        meta.dataset._children = originalDatasets.slice(startIndex);
	        meta.dataset._children = originalDatasets;

	        points.forEach(function(point, i) {

	            let colorStopPosition = roundNumber((point._model.x - minX) / (maxX - minX), 2);

	            if (i === 0) {
	                linearGradient.addColorStop(colorStopPosition, backgroundColors[i + 1]);
	            }
	            if (i >= 1 && i < (points.length - 1)) {
	                linearGradient.addColorStop(colorStopPosition, backgroundColors[i]);
	                linearGradient.addColorStop(colorStopPosition, backgroundColors[i + 1]);
	            }

	            if (i == points.length - 1) {
	                linearGradient.addColorStop(colorStopPosition, backgroundColors[i]);
	                linearGradient.addColorStop(colorStopPosition, backgroundColors[i]);
	            }

	            vm.backgroundColor = linearGradient;
	            point.draw(area);

	        });
	    }
	});

	var ctx = document.getElementById('canvas').getContext('2d');

	var chart = new Chart(ctx, {
	    type: 'multicolorLineArea',
	    data: {
	        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
	        datasets: [{
	            label: "Test",
	            pointBackgroundColor: ['rgba(233, 12, 43, 1)', 'rgba(33, 12, 243, 1)', 'rgba(233, 12, 43, 1)', 'rgba(43, 212, 23, 1)', 'rgba(233, 12, 43, 1)', 'rgba(233, 12, 43, 1)', 'rgba(233, 12, 43, 1)', 'rgba(233, 12, 43, 1)', 'rgba(43, 212, 23, 1)', 'rgba(233, 12, 43, 1)', 'rgba(233, 12, 43, 1)', 'rgba(43, 212, 23, 1)'],
	            data: [0, 10, 5, 2, 20, 30, 45, 32, 23, 54, 64, 12],
	            colors: ['rgba(233, 12, 43, 1)', 'rgba(23, 12, 243, 1)', 'rgba(233, 12, 43, 1)', 'rgba(43, 212, 23, 1)', 'rgba(233, 12, 43, 1)', 'rgba(233, 12, 43, 1)', 'rgba(233, 12, 43, 1)', 'rgba(233, 12, 43, 1)', 'rgba(43, 212, 23, 1)', 'rgba(233, 12, 43, 1)', 'rgba(233, 12, 43, 1)', 'rgba(43, 212, 23, 1)'],
	            backgroundColor: ['rgba(233, 12, 43, 0.5)', 'rgba(23, 12, 243, 0.5)', 'rgba(233, 12, 43, 0.5)', 'rgba(43, 212, 23, 0.5)', 'rgba(233, 12, 43, 0.5)', 'rgba(233, 12, 43, 0.5)', 'rgba(233, 12, 43, 0.5)', 'rgba(233, 12, 43, 0.5)', 'rgba(43, 212, 23, 0.5)', 'rgba(233, 12, 43, 0.5)', 'rgba(233, 12, 43, 0.5)', 'rgba(43, 212, 23, 0.5)']
	        }]
	    },
	    options: {}
	});

[etimberg]

@Hedva I think it's better to do this using a plugin. I created a quick example.

The downside is that at the end of the plugin function it needs to set some internal properties on the line that draws so that the first render is correct.

[Hedva]

Tnx, that does work.
For anyone else looking at this: Make sure addColorStop for the gradient doesn't pass 1.0. Current example can pass, so 1.00004 throws out an error.

Here is a codepen based on @etimberg example which can't pass 1.0:
https://codepen.io/anon/pen/bMqxQO

Extra bit of code:

function roundNumber(num, scale) {
    var number = Math.round(num * Math.pow(10, scale)) / Math.pow(10, scale);
    if(num - number > 0) {
        return (number + Math.floor(2 * Math.round((num - number) * Math.pow(10, (scale + 1))) / 10) / Math.pow(10, scale));
    } else {
        return number;
    }
};

let colorStopPosition = roundNumber((point._model.x - left) / (right - left), 2);