Why Your Time-Series Chart Dies at 100,000 Points
The bottleneck is almost never the chart library. It is the number of draw calls you hand the browser, and there are three ways to cut it.
You wire up a chart, feed it a week of tick data, and the page locks up. The instinct is to blame the charting library and go shopping for a faster one. That is usually the wrong move — most libraries are within a factor of two of each other, and swapping costs you a day.
The actual bottleneck
A browser does not care that you have a million data points. It cares how many things it has to paint. An SVG-based chart creates one DOM node per point, so a million points means a million nodes: layout, style recalculation, and paint all scale with that number, and none of it is something a faster library fixes.
Three ways to cut the draw calls
- Downsample before you draw. At 1,600 pixels wide, no more than 1,600 points can be distinguished. Everything past that is invisible detail that still costs you paint time.
- Move to a canvas or WebGL renderer. One draw call instead of a million nodes. You give up per-point DOM interaction and have to implement hit testing yourself.
- Aggregate at the source. If the data comes from a time-series store, ask it for buckets rather than raw ticks. The network transfer usually costs more than the render anyway.
The part that surprises people
Naive downsampling — taking every n-th point — hides exactly the spikes you built the chart to see. A price series sampled every hundredth tick will quietly drop the one bar that mattered.
Drag the point count down with “Every n-th point” selected and watch the spike disappear. Then switch algorithms without touching the slider — same number of points, and the spike comes back.
Keeping 100 of 2000 pointsThe spike was dropped
Algorithms like Largest-Triangle-Three-Buckets exist for this: they keep the points that preserve the visual shape of the series rather than the ones that happen to fall on a fixed interval. The output has the same point count as naive sampling and looks dramatically more like the original.
Common follow-ups
Does downsampling hide real spikes?
Only if you pick the wrong algorithm. Taking every n-th point drops whatever falls between samples, so a one-tick spike disappears. Largest-Triangle-Three-Buckets keeps the points that define the shape of the line, extremes included.
How many points can a browser actually handle?
With SVG, expect trouble somewhere past 10,000 points, because each point becomes a DOM node that has to be laid out and styled. With canvas there is one element and one draw pass, so tens of thousands are routine.
Should I downsample on the server or in the browser?
On the server if readers never zoom into the raw series, because then you also ship far less data over the wire. In the browser if they can zoom, because each zoom level needs a different sample taken from the original.