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.