I m trying to color in the line in between data points in a chartjs line graph. At the moment its just applying the borderColor to a single data point and not to the line.
Current Code:
const data = {
labels: rawData.map(row => row.t),
datasets : [{
data: rawData.map(row => ({x: row.t, y: row.x})),
fill: false,
pointRadius: 1,
borderColor: rawData.map(row => getBorderColor(row)),
}]
}
function getBorderColor(row) {
let color
if (row.is_sp && !row.is_qp) {
color = #00ff00
} else if (row.is_qp && !row.is_sp) {
color = #ff0000
} else {
color = #000000
}
return color
}
const options = {
responsive: true,
maintainAspectRatio: true,
fill: false,
interaction: {
intersect: false
},
radius: 0,
plugins: {
legend: {
display: false
}
}
}
chartInstance = new Chart(chart.value, {
type: line ,
data,
options,
})
Output: output graph
Appreciate it.
I tried using the segments feature in chartjs but couldnt get it to propoerly identify when the color should stop and start.