Optimizing Line Charts with Chart.js Decimation: A Practical Guide

Why Decimation Matters

When a line chart contains thousands of points, the browser must render every pixel, which can drop frame rates and freeze the UI. The Decimation plugin reduces the dataset size before drawing, keeping the visual shape while improving performance.

How the Decimation Plugin Works

The plugin samples the original series and produces a new array that contains only the points necessary to approximate the curve. It operates only on line charts with a linear x‑axis and requires that the data be sorted by the x‑value.

Configuring Decimation

const config = {
  type: 'line',
  data: {
    labels: [...],
    datasets: [{
      data: [...],          // raw points
      parsing: false,       // crucial – tells Chart.js not to parse each point
    }]
  },
  options: {
    plugins: {
      decimation: {
        enabled: true,
        algorithm: 'lttb',   // or 'min-max'
        minSamples: 500,     // minPassthrough – keep at least 500 points
      }
    },
    scales: {
      x: { type: 'linear', position: 'bottom' },
      y: { type: 'linear' }
    }
  }
};

new Chart(document.getElementById('myChart'), config);

Key points:

• parsing: false disables automatic parsing so the plugin can operate on the raw data array.
• minSamples is the minPassthrough setting – the plugin will never reduce the dataset below this count.
• Choose 'lttb' for better peak preservation; 'min-max' is faster but may miss subtle spikes.

Common Pitfalls

• Using a category scale on the x‑axis – decimation ignores the data.
• Leaving parsing enabled – the plugin will be bypassed.
• Data not sorted by x – the algorithm assumes sequential order; unsorted data yields incorrect visual results.
• Relying on decimation for very small datasets (<1,000 points) – the overhead can outweigh the benefit.

Performance Verification

1. Create a dataset with >5,000 points.
2. Render the chart twice: once with decimation.enabled set to true, once set to false.
3. Open Chrome DevTools → Performance tab, record a short interaction (e.g., pan or zoom).
4. Compare the CPU usage and frame times; a noticeable drop when decimation is enabled confirms success.

Always test in the target browsers, as older engines may still struggle with large canvases despite decimation.

When Not to Use Decimation

• Non‑linear or categorical axes.
• Charts that require exact point rendering (e.g., scatter plots with discrete markers).
• Real‑time data streams where the dataset changes every frame – recomputing the decimated array can negate the benefit.

Conclusion

The Decimation plugin is a lightweight, built‑in solution for line charts that need to display thousands of points. By correctly configuring parsing: false, a linear axis, and a sorted dataset, you can achieve smooth rendering while preserving key visual features. Remember to benchmark and verify in your specific environment before deploying to production.