What are the methods for data sampling in VChart charts?

Problem Description

May I ask if there are any data sampling configurations in vchart to improve performance when the amount of data in the line chart is large?

Solution

VChart line chart, since the 1.6.0version supports data sampling method configuration.

The downsampling strategy for line charts when the data volume is much larger than the pixel points can effectively optimize the drawing efficiency of the chart when turned on. It is turned off by default, that is, all drawings without filtering Data Points. Optional values for samplingconfiguration:

'Lttb': Using Largest-Triangle-Three-Bucket algorithm, it can maximize the trend, shape and extreme value of the sampled line.
'Min': Take the minimum value of the filter point
'Max': take the maximum value of the filter point
'Sum': take the sum of the filter points
'Average': Take the average of the filter points

The sampling effect can be adjusted through the samplingFactor configuration.

sampling: 'lttb',
samplingFactor: 0.1,

Code Example

https://visactor.io/vchart/demo/line-chart/line-sampling

Results

Quote

github：https://github.com/VisActor/VChart
Sampling option: https://visactor.io/vchart/option/lineChart#sampling

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →