Big data optimization
Very large datasets (> 5k or > 10k datapoints) will cause the browsers rendering engines to slow down, caused by too many SVG DOM elements to render.
The following charts use the LTTB algorithm (Largest-Triangle-Three-Bucket) beyond a certain threshold to downsample the rendered dataset while preserving its shape. These components are the most susceptible to be used with very large datasets:
| Component | Default Threshold | Remark |
|---|---|---|
| VueUiXy | 500 | |
| VueUiXyCanvas | 10000 | Since this chart uses canvas, threhsold can be set higher |
| VueUiQuadrant | 500 | |
| VueUiScatter | 500 | |
| VueUiSparkline | 500 | |
| VueUiSparkTrend | 500 |
The downsample threshold for each component can be set in the config prop passed to components:
const config = ref({
downsample: {
threshold: 500,
},
...// rest of your config
})This optimization answers #123
Check out this paper about LTTB, page 21 if you are curious