[Chartjs]-How to hide some points inside my line graphic in React ChartJS 2?

by

2👍

✅

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>

2👍

You might want to take a look at the API method getDatasetMeta.

This returned data has all of the metadata that is used to construct the chart.

With this metadata you can set the radius of specific points to zero to hide them.

I reproduced your example with chart.js 2.7.1 below:

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 myChart = new Chart(ctx, {
  type: 'line',
  data: data
});

var meta = myChart.getDatasetMeta(0);
for (var i = 1; i <= data.datasets[0].data.length - 1; i++) 
{
   if (data.datasets[0].data[i - 1] === data.datasets[0].data[i])
   {   		
   		meta.data[i]._model.radius = 0;
   }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart" height="300" width="800"></canvas>

Leave a comment