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.
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
}
}
}
});
Name | Type | Default |
---|---|---|
groupingSize |
Number |
1 |
caculateForCanvasSize |
{width: x, height: y} |
false |
recalculationMode |
[resize, increase, decrease, none] |
none |
tooltipOptimization |
Boolean |
true |
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.
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.
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.
optimizes the rendering of tooltips. Tooltips are only rendered with a mouse click and no animations are used.
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
chartjs-plugin-largedatasets
is available under the MIT license.