[Chartjs]-Chart.js data background color is overwriting point background color

by

11👍

✅

I’ve found a solution by myself. I wasn’t aware that there are different versions of chart.js

I am using v2.0 and there exists a property named pointBackgroundColor

var ctxLine = document.getElementById("lineChart").getContext('2d');
lineChart = new Chart(ctxLine, {
type: 'line',
data: {
     labels: dates,
     datasets: [{
           data: ['...'],
           backgroundColor: "rgba(52,152,219,0.4)",
           pointBackgroundColor: "#fff"
       }]
}
});

2👍

It looks like Chart.defaults.global.elements.point.backgroundColor only takes a single Color string.

I don’t believe would be possible to have different colored points. Here is the documentation page for it.

I tried to plug in an array into that backgroundColor property but it defaulted to a different color. Have a look at this fiddle, if you want to play around.

You could always submit a feature request.

Leave a comment