Gradient not applied

I’m trying to apply a gradient as background color to labels but it doesn’t work.

Here is code, based on data labels sample:

<script id="script-init">
var ctx = document.getElementById('chart-0').getContext("2d");
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(1, "#f49080");

	var DATA_COUNT = 8;
	var labels = [];
	Samples.srand(8);

	for (var i = 0; i < DATA_COUNT; ++i) {
		labels.push('' + i);
	}

	Chart.helpers.merge(Chart.defaults.global, {
		aspectRatio: 4/3,
		tooltips: false,
		layout: {
			padding: {
				top: 42,
				right: 16,
				bottom: 32,
				left: 8
			}
		},
		elements: {
			line: {
				fill: false
			}
		},
		plugins: {
			legend: false,
			title: false
		}
	});
</script>

<script id="script-construct">
var chart = new Chart('chart-0', {
	type: 'line',
	data: {
		labels: labels,
		datasets: [{
			backgroundColor: gradientStroke,
			borderColor: gradientStroke,
			data: Samples.numbers({
				count: DATA_COUNT,
				min: 0,
				max: 100
			})
		}]
	},
	options: {
		plugins: {
			datalabels: {
					backgroundColor: function(context) {
						return gradientStroke;
					},
					borderRadius: 4,
					color: 'white',
					font: {
						weight: 'bold'
					},
					formatter: Math.round
				}
			},
			scales: {
				yAxes: [{
					stacked: true
				}]
			}
		}
	});
</script>

Here is the result:

There is a similar issue in Chart.js, fixed in the master .

[simonbrunel]

Thanks @stockiNail for the extra details about the context, it looks really great.

[simonbrunel]

In the meantime, here is a “non ideal” workaround if you use (or want to use) a color lib such as chroma, etc., you could interpolate the background color using scriptable options (jsfiddle).