Skip to content

v2.4.11
Compare
Choose a tag to compare
@graphieros graphieros released this 29 Nov 05:24
· 248 commits to master since this release
v2.4.11
671e64e

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

Assets 2
Loading