user2023141 :
On my chart (just a horizontal line) I want to draw a second horizontal line. This second line is just a line between two arbitrary points. So far, I haven't manage to draw this second line. The second line is not rendered.
// labels (dates)
var startDate = new Date('2019-10-01'), endDate = new Date('2019-10-10');
var dt = new Date(startDate);
let labels = new Array();
while (dt <= endDate) {
labels.push(new Date(dt));
dt.setDate(dt.getDate() + 1);
}
const numbers = new Array();
const numbers1 = new Array();
// data for first line (just a horizontal line)
for (var a = 0; a < 10; a++) {
numbers.push(5);
}
// data for the second line, also a horizontal line but smaller
for (var a = 0; a < 10; a++) {
if (a == 3 || a == 7) {
numbers1.push(6);
} else {
numbers1.push(null);
}
}
this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');
// display chart
const myChart = new Chart(this.ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Daily prices',
data: numbers,
fill: false,
borderWidth: 2,
borderColor: 'black'
}, {
label: 'Pattern',
data: numbers1,
fill: false,
borderWidth: 2,
borderColor: 'red'
}]
},
options: {
elements: {point: {radius: 0}},
responsive: false,
display: true
}
});
}
timclutton :
Chart.js does not draw a line between non-adjacent points, by default. This can be enabled, per dataset, with the spanGaps property:
If
true, lines will be drawn between points with no ornulldata. Iffalse, points withNaNdata will create a break in the line.
...
{
label: 'Pattern',
data: numbers1,
fill: false,
borderWidth: 2,
borderColor: 'red',
spanGaps: true
}
...
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=346769&siteId=1