How to hide some points inside my line graphic in React ChartJS 2?

Question

I would like to hide or change the color of point when its own value is 0.

Previous version of ChartJS you had the access to these point elements through the code below:

var myChart = new Chart(ctx).Line(data);
for (var i = 1; i <= data.datasets[0].data.length - 1; i++) 
   if (data.datasets[0].data[i - 1] === data.datasets[0].data[i])
      myChart.datasets[0].points[i].display = false;

Example: http://jsfiddle.net/3tok57dL/

I'm using chart.js 2.7.0 and react-chartjs-2 2.6.2, and I can't find how to access these elements.

Thanks.

Answer 1

You can access some dataset properties applying to point (see http://www.chartjs.org/docs/latest/charts/line.html), for example pointRadius and pointBackgroundColor.

Check fiddle updated: http://jsfiddle.net/beaver71/79d1bnf2/

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(151,187,205,0.2)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,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();
}

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