Awesome

chartjs-plugin-downsample

Plugin for downsampling data in Chart.js, based off of sveinn-steinarsson/flot-downsample.

Samples

Configuration

The configuration for this plugin lives in chartInstance.options.downsample. This looks like the following while setting up your chart:

{
    options: {
        downsample: {
            enabled: true,
            threshold: 500 // max number of points to display per dataset
        }
    }
}

Additional Options

Option	Default	Description
auto	true	If true, downsamples data automatically every update. Otherwise, chart will have to be manually downsampled with `.downsample()`
onInit	true	If true, downsamples data when the chart is initialized.
restoreOriginalData	true	If true, replaces the downsampled data with the original data after each update. This is, mainly, for compatibility with other plugins.
preferOriginalData	false	If true, downsamples original data instead of data. This option can clash with dynamically-added data. If false, data cannot be "un-downscaled".
targetDatasets	[]	An array of dataset IDs that you want to downsample. If empty or not set, downsamples all datasets.

Methods

Method	Description
chartInstance.downsample(var threshold = null)	Manually downsamples the data on the given chart. If a threshold is passed, updates the threshold in the chart config to the given value.

Optimal Performance

This plugin was created because of performance issues while loading lots of data in a chart with pan/zoom capabilites.

If options are not changed from their defaults, data will be downsampled every time the user pans or zooms - this is probably not what you want. For a more performant configuration, try this:

{
    options: {
        downsample: {
            enabled: true,
            threshold: <YOUR THRESHOLD HERE>, // change this

            auto: false, // don't re-downsample the data every move
            onInit: true, // but do resample it when we init the chart (this is default)

            preferOriginalData: true, // use our original data when downscaling so we can downscale less, if we need to.
            restoreOriginalData: false, // if auto is false and this is true, original data will be restored on pan/zoom - that isn't what we want.
        }
    }
}

Building

npm run build will generate a browser-ready chartjs-plugin-downsample.js and chartjs-plugin-downsample.min.js

License

chartjs-plugin-downsample is released under the terms of the MIT License.