sample

For line, column, bar, and scatter plot charts, when the data volume is significantly larger than the screen pixels, enabling some built-in sampling strategies can effectively optimize chart rendering efficiency. This feature is disabled by default, meaning all original data is rendered.

Getting Started

Here’s an example of using sample:

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'line',
  data,
  encode: { x: 'x', y: 'y' },
  transform: [
    {
      type: 'sample',
      thresholds: 500,
      strategy: 'max',
    },
  ],
});

chart.render();

Options

strategy has 6 built-in strategies:

• lttb - Uses the Largest-Triangle-Three-Bucket algorithm, which can best preserve the trend, shape, and extreme values of the line after sampling.
• median - Takes the median of filtered points
• max - Takes the maximum value of filtered points
• min - Takes the minimum value of filtered points
• first - Takes the first value
• last - Takes the last value
• (I: number[], X: number[], Y: number[], thresholds: number) => number[] - Uses a custom function for sampling

FAQ

• How to implement a custom sampling strategy?

function strategy(I: number[], X: number[], Y: number[], thresholds: number) {
  // Sample this group of data here and return an array of data indices
  return [1, 101, 202 /*...*/];
}

chart.options({
  type: 'line',
  encode: { x: 'x', y: 'y' },
  transform: [{ type: 'sample', strategy }],
});