Как сделать такой бэкграунд ?Первый раз работаю с chartjs
var start = 300;
var labelArr = [];
while (start >= 0) {
labelArr.unshift(start--);
}
var ctx = document.getElementById('chart').getContext('2d');
// This chart would show a line only for the third dataset
let chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'First dataset',
data: [2.0, 1.9, 1.8, 1.7,1.6,1.5,1.5,1.5,1.5,1.5,0.7,0.6,0.5,0.4,0.3,0],
borderColor: "#F5BBAB",
backgroundColor: 'red',
},
{
label: 'second dataset',
data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
borderColor: "#F3CEAA",
},
{
label: 'third dataset',
data: [1.7, 1.7, 1.6, 1.5,1.4,1.3,1,0],
borderColor: "#FEF6CF",
},
{
label: 'fourth dataset',
data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
borderColor: "#E2E3E0",
},
{
label: 'fifth dataset',
data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
borderColor: "#E2E3E0",
},
{
label: 'sixth dataset',
data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
borderColor: "#D6B7A2",
},
{
label: 'seventh dataset',
data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
borderColor: "#E2E7EB",
},
{
label: 'eighth dataset',
data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
borderColor: "#E0E2F9",
},
{
label: 'ninth dataset',
data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
borderColor: "#B2B7CA",
},
],
labels: labelArr
},
options: {
elements: {
point:{
radius: 0
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 2,
stepSize: 0.2,
}
}],
}
},
// tooltips: {
// mode: false,
// callbacks: {
// title: function() {},
// label: function() {}
// }
// }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="chart"></canvas>