[Chartjs]-Chart.js v3 – data decimation not working with zoom plugin

by

3👍

I suspect that it works in fact correctly.

Code sample before some possible explaination:

var ctx = document.getElementById("myChart");
var nbPoints = 1000;
var samplesPoints = 100;
var thresholdsPoints = 900;
var dataArr = []
for (let i = 0; i < nbPoints; i++) {
  dataArr.push({x: i, y: Math.floor(Math.random() * 100)})
}
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: '# of Votes',
            data: dataArr
        }]
    },
    options: {
      parsing: false,
      normalized: true,
      animation: false,
      responsive: false,
      plugins: {
        decimation: {
          enabled: true,
          samples: samplesPoints,
          threshold: thresholdsPoints,
          algorithm: 'lttb'
        },
        zoom: {
          limits: {
            x: { min: 0, max: nbPoints }
          },
          pan: {
            enabled: true,
            mode: 'x'
          },
          zoom: {
            wheel: {
              enabled: true
            },
            pinch: {
              enabled: true
            },
            mode: 'x'
          }
        }
      },
      scales: {
        x: {
          type: 'linear'
        }
      }
    }
});

function resetZoom() {
  myChart.resetZoom();
}
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://npmcdn.com/chart.js@3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://npmcdn.com/chartjs-plugin-zoom@1.2.1/dist/chartjs-plugin-zoom.min.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>
<div class="myButton">
  <button onclick="resetZoom()">Reset Zoom</button>
</div>

It was due to a modification that was proposed a while ago: the idea was to re-perform decimation each time you zoom in order to have the "highest resolution" possible (for history: https://github.com/chartjs/Chart.js/issues/8833)

But the thing that you probably missed (I suppose) are the following properties of the decimation plugin
(https://www.chartjs.org/docs/master/configuration/decimation.html#configuration-options):

  • Samples: How many points you want to have after decimation
  • Threshold: Above which number of point you want the decimation happen. Often, you might want samples = threshold, but that is not mandatory.

And the "problem" is probably the default values of each of these:

  • sample: Defaults to the canvas width to pick 1 sample per pixel.
  • threshold: Defaults to 4 times the canvas width.

Meaning that for a 800px graph, you will have 800 points, and decimation will happen only if you have more than 800*4 points on the current range.

So what I suppose is happening: you have let say 1000 points that you display on a 200px graph.
At first everything is ok, but once you zoom, you have 750 points, which will be less than 200*4, so decimation won’t happen and you will have in fact 750 points (while you would expect 200)

In the end, you might want to update your decimation plugin configuration with something like:

decimation: {
    enabled: true,
    algorithm: 'lttb',
    samples: 800,
    threshold: 800
}

Leave a comment