15๐
โ
You where almost there, in v3 by default line charts dont fill so you will need to set fill: true
Example
var ctx = document.getElementById('chart').getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'rgba(224, 195, 155, 1)');
gradient.addColorStop(1, 'rgba(100, 100, 0,0)');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
backgroundColor: gradient,
label: 'Numbers',
fill: true,
data: [12, 19, 3, 5, 2, 3],
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
tension: 0.3
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="chart" width="800" height="400"></canvas>
Source:stackexchange.com