Chart.js data background color is overwriting point background color

Question

I'm working with Chart.js. I have a single data line with a specific color. I want the points of these data line to be in a different color. According to the documentation you can do this with Chart.defaults.global.elements.point.backgroundColor

 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)"
       }]
 },
 options: {
    elements: {
         point: {
              borderColor: "rgb(255,255,0)",
              backgroundColor: "rgb(255,0,0)"
          }
      }                     
   }
});

point.borderColor is working properly, but point.backgroundColor is only working if I remove the the first backgroundColor field.

Answer 1

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"
       }]
}
});

Answer 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.