chartjs-plugin-largedatasets

Chart.js plugin to display large datasets in a line chart. The plugin reduces the number of data points drawn for a defined number of pixels. This way, only points that are actually needed will be displayed.

Requires Chart.js 2.8.0 or later.

Example

new Chart(ctx, {
  // ... data ...
  options: {
    // ... other options ...
    plugins: {
      largedatasets: {
          groupSize: 1, // defines on how many pixels a point is drawn. 
          recalculationMode: 'none', // no recalculation after window resize
      }
    }
  }
});

Options

Name	Type	Default
groupingSize	Number	1
caculateForCanvasSize	{width: x, height: y}	false
recalculationMode	[resize, increase, decrease, none]	none

groupingSize

The pixel area in which a single data point is displayed. E.g one datapoint per 2x2 pixel if set to 2. Default value is 1.

calculateForCanvasSize

Fixed canvas size for which the algorithm calculates the required points. If not set, the plugin uses the current canvas size. If this options is activated the recalculationMode option is ignored.

recalculationMode

Indicates for which resize event the data point resolution should be recalculated.

• none: The data point resolution is not recalculated.
• decrease: Recalculation when reducing the canvas size.
• increase: Recalculation when increasing the canvas size.
• resize: Recalculation for every resize event.

When setting the recalculationMode to increase or resize the algorithm uses the original data to calculate the resolution. So the original data will be cached which takes much longer calculation time and memory. Don't use this mode with extremly big data.

Development

You first need to install node dependencies (requires Node.js):

> npm install

The following commands will then be available from the repository root:

> gulp build            // build dist files
> gulp lint             // perform code linting

License

chartjs-plugin-largedatasets is available under the MIT license.