ChartJS change point color

by pepperdigital

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<button onclick="checkPoints()">check points</button>
<button onclick="checkPoints(1)">check points and remove</button>

<canvas id="myChart" height="300" width="800"></canvas>

JavaScript

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My Second dataset",
      fillColor: "rgba(13,25,28,1)",
      strokeColor: "rgba(13,25,28,1)",
      pointColor: "rgba(113,25,28,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(13,25,28,1)",
      data: [0, 0, 0, 0, 0, 10, 10, 10, 10, 10, 19, 86, 27, 90, 28, 48, 40, 19, 86, 27, 90]
    }
  ]
};
var options = {};
var myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

checkPoints = function(remove) {
  myChart.data.datasets[0].pointBackgroundColor = [];
  myChart.data.datasets[0].pointRadius = [];
  for (var i = 1; i <= data.datasets[0].data.length - 1; i++) {
    if (data.datasets[0].data[i - 1] === data.datasets[0].data[i]) {
    	if (remove) {
      	myChart.data.datasets[0].pointRadius[i] = 0;
      }
      myChart.data.datasets[0].pointBackgroundColor[i] = 'red';
    } else  {
      myChart.data.datasets[0].pointBackgroundColor[i] = 'blue';
    }
  }
  myChart.update();
}