[Chartjs]-How to show only the data points that have a change in Chartjs?

by

0👍

✅

A slightly different approach to WhiteHat’s (ninja’d!) that iterates the series via .forEach to build the colour options:

Edit: Minor tweak to if to account for previous and next value in deciding point visibility and added hover colour settings to show hidden point on hover.

let labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
  series = [10, 5, 5, 5, 5, 2, 3, 3, 3, 10],
  pointBackgroundColor = [],
  pointBorderColor = [],
  pointHoverBackgroundColor = 'white',
  pointHoverBorderColor = 'red';

series.forEach(
  (value, index) => {
    if (value == series[index - 1] && value == series[index + 1]) {
      pointBackgroundColor.push('transparent');
      pointBorderColor.push('transparent');
    } else {
      pointBackgroundColor.push('white');
      pointBorderColor.push('red');
    }
  });

myChart = new Chart(document.getElementById('chart'), {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'series1',
      data: series,
      pointBackgroundColor: pointBackgroundColor,
      pointBorderColor: pointBorderColor,
      pointHoverBackgroundColor: pointHoverBackgroundColor,
      pointHoverBorderColor: pointHoverBorderColor
    }]
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index',
      intersect: false
    },
    hover: {
      intersect: false
    }
  }
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>

2👍

you can use the following options to style the points…

pointBackgroundColor, pointBorderColor, pointBorderWidth

but instead of providing a single value… 

pointBackgroundColor: '#ffffff',
pointBorderColor: 'rgb(102, 187, 106)',
pointBorderWidth: 2,

you’ll need to provide an array, with values for each point in the dataset,
then you can change the value for the points in question.

for the points you do not want to show, use color such as 'transparent'.
this will hide the point, but still show tooltip on hover. 

pointBackgroundColor: ['#ffffff', '#ffffff', 'transparent', 'transparent', '#ffffff', '#ffffff'],
pointBorderColor: ['rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'transparent', 'transparent', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)'],
pointBorderWidth: [2, 2, 0, 0, 2, 2]

see following working snippet… 

  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'line',
    data: {
      labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      datasets: [{
        backgroundColor: 'rgba(102, 187, 106, 0.2)',
        borderColor: 'rgb(102, 187, 106)',
        borderWidth: 2,
        data: [5, 6, 6, 6, 6, 7, 6, 6, 5, 4],
        label: 'y',
        lineTension: 0,
        pointBackgroundColor: ['#ffffff', '#ffffff', 'transparent', 'transparent', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'],
        pointBorderColor: ['rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'transparent', 'transparent', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)'],
        pointBorderWidth: [2, 2, 0, 0, 2, 2, 2, 2, 2, 2]
      }]
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

0👍

WhiteHat solution is good but doesn’t achieve the desired effect. When you hover over a hidden data point circle it should make the circle visible.

Here is how I did it

Step 1:

In the backend using PHP, I check if the prev and next point are different, and made a point radius 0.

$countPoints = count($points);
for ($i=1; $i < $countPoints-1; $i++) { 
    $prevVal = $chartChange[$i-1];
    $nextVal = $chartChange[$i+1];
    if($chartChange[$i] == $prevVal && $chartChange[$i] == $nextVal){
        $points[$i] = 0;
    }
}

Step 2 :

Add and pass the imploded array to the options object. Using [3,0,3,3] format

pointRadius: [{/literal}{$points}{literal}]

Edit:

Using only js

        
  let labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
  series = [10, 5, 5, 5, 5, 2, 3, 3, 3, 10],
  pointRadius = [],
  pointBackgroundColor = "rgb(230, 247, 238)",
  pointBorderColor = "rgb(47, 186, 117)";

series.forEach(
  (value, index) => {
    if (value == series[index - 1] && value == series[index + 1]) {
      pointRadius.push(0);
    } else {
      pointRadius.push(4);
    }
  });

myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'series1',
      fill: 'start',
      pointRadius: pointRadius,
      data: series,
      backgroundColor:pointBackgroundColor,
      borderColor:pointBorderColor,
      pointHoverRadius: 4,
      pointBackgroundColor: pointBackgroundColor,
      pointBorderColor: pointBorderColor,
    }]
  },
  options: {
    tooltips: {
            // mode: 'index',
            intersect: false
          },
            tooltips: {
            mode: 'index',
            axis: 'x',
            intersect: false
          },
          hover: {
      intersect: false
    },
    maintainAspectRatio: false
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment