I came across a question about implementing gradients with the latest version of chart.js. I attempted to replicate it in this demo, but the gradient settings seemed to be ineffective.
Do you have any suggestions on how to make it work?
Below is the complete code snippet for the implementation:
const canvas = document.getElementById('chart') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(250,174,50,1)');
gradient.addColorStop(1, 'rgba(250,174,50,0)');
const config: ChartConfiguration = {
type: 'line',
options: {
responsive: true,
datasetStrokeWidth: 10,
pointDotStrokeWidth: 14,
tooltipFillColor: 'rgba(0,0,0,0.8)',
tooltipFontStyle: 'bold',
tooltipTemplate:
"<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>",
scaleLabel: "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>",
scales: {
y: {
beginAtZero: true,
},
},
},
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: [
{
lineTension: 0.4,
strokeColor: '#ff6c23',
pointColor: '#fff',
fillColor: gradient, // Apply the gradient here
pointStrokeColor: '#ff6c23',
pointHighlightFill: '#fff',
pointHighlightStroke: '#ff6c23',
label: '# of Votes',
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],
borderWidth: 1,
},
],
},
};
new Chart(ctx, config);