Skip to content

πŸ’Ž Version 6.2.0

Choose a tag to compare

@junedchhipa junedchhipa released this 19 Jul 10:09

ApexCharts 6.2.0

A performance release. Large-series rendering is 30 to 45% faster in both renderers, and scatter charts create half the DOM nodes they used to. There are no API changes and no new options: the rendered output is verified byte-identical to 6.1.0, so existing configs render exactly as before, just faster.

The numbers below are 5-trial medians from the reproducible harness behind the "100,000 Points" rendering benchmark post (headless Chromium, animations off, identical seeded data).

⚑ Performance

Scatter and bubble charts: half the nodes, up to 45% faster

Markers now render into ONE apexcharts-series-markers group per series instead of one wrapper group per point. On a 50,000-point scatter that removes 50,000 groups, 50,000 event-delegation setups, and 50,000 clip-path writes from every render.

Scatter (SVG) 6.1.0 6.2.0
5,000 points 109 ms 69 ms
20,000 points 395 ms, 40,100 nodes 249 ms, 20,102 nodes
50,000 points 1,042 ms 575 ms

Per-point interactivity is unchanged: tooltips, dataPointMouseEnter / dataPointMouseLeave / dataPointSelection, marker hover states, and selection filters all read their identity from the marker paths themselves and keep working exactly as before. Discrete markers, per-point fillColor, bubble z-scaling, and null-value markers are unaffected.

Line and area charts: 36 to 43% faster at high point counts

Plain straight line and area series now take a numeric fast path: pixel coordinates are computed in one tight loop and the path string is assembled in a single join, skipping the per-point machinery that dominated large renders. Anything the fast path cannot reproduce exactly (null gaps, visible markers, data labels, stacking, combo charts, smooth and stepped curves) automatically falls back to the previous code path. The d attribute output is byte-identical either way.

Line, single series 6.1.0 6.2.0
100,000 points (SVG) 161 ms 103 ms
100,000 points (canvas) 166 ms 95 ms
50,000 points (SVG) 89 ms 63 ms
updateSeries cycle, 10,000 points 25 ms 16 ms

The updateSeries improvement applies to both renderers, so streaming and frequently-updating charts benefit as well.

Canvas renderer: batched marker painting

The canvas renderer (apexcharts/features/renderer-canvas) now paints markers as style batches: one fill/stroke state application per run of same-style markers, so a uniform single-series scatter collapses to a single batch. Non-circle marker shapes (square, triangle, diamond, star, cross, plus) reuse one cached geometry per shape and size, translated per marker, instead of building a path string and parsing it for every point. Line and area series painted on canvas consume the fast path's numeric coordinates directly, with no path-string parse at all.

πŸ”§ Behavior changes (structural, not visual)

  • One markers group per series. If custom CSS or JavaScript targeted the per-point .apexcharts-series-markers wrapper groups in scatter or bubble charts (for example, selecting the nth group to reach the nth point), there is now a single such group per series. The .apexcharts-marker paths inside it, including their rel, j, index, cx, cy, and default-marker-size attributes, are unchanged, so selectors that address markers directly keep working.

Compatibility

  • No new options, no changed defaults, no TypeScript changes.
  • SVG path output (d attributes) and canvas pixels are byte- and pixel-identical to 6.1.0 across the snapshot suite; only the wrapper-group structure noted above differs.
  • Verified by the full unit, interaction, and end-to-end snapshot suites, plus new regression tests covering the series-level marker groups, the canvas marker batching, and the line fast path's byte-identity against the previous geometry code.