Break the SVG Ceiling: The Strata Canvas Renderer

Strata is the hybrid canvas renderer in ApexCharts 6.0. SVG is what makes ApexCharts charts crisp, stylable, and accessible: every bar, point, and label is a real DOM element you can inspect and hit-test. That is also its ceiling. At tens of thousands of points, one DOM node per element is the thing that slows the page down. Strata lifts the ceiling by painting the dense series bodies into a single <canvas> while keeping the axes, grid, zoom, and tooltip as SVG. You opt in with one option, chart.renderer, and the rest of your config is unchanged.

This post explains what the hybrid does, exactly which parts stay SVG (this matters more than it sounds), the real tradeoff, and when to reach for it.

Key takeaways

• It is a hybrid, not a full canvas rewrite. Series bodies paint to canvas; axes, grid, zoom selection, tooltip, data labels, and annotations stay SVG.
• One option turns it on: chart.renderer: 'canvas', or 'auto' to switch above chart.rendererThreshold (default 8000 points).
• The win is DOM-node count. A canvas series is one node regardless of point count; an SVG series is one node per element. At 20,000 bars that is the difference between a few dozen nodes and twenty thousand.
• The cost is per-element access. On the canvas layer you lose per-point DOM styling, hit-testing, and keyboard traversal; those remain SVG-only.
• chart.getActiveRenderer() tells you which renderer is live, which you need when using 'auto'.

See it live

The benchmark below renders a dense scatter with ApexCharts, and everything is measured in your own browser: the active renderer, the render time, and the chart's DOM-node count. Flip the renderer and the point count, or press Benchmark both to render the identical data once as SVG and once as canvas and compare them side by side. Push it to 50,000 or 100,000 points and switch to svg: the render time and the DOM-node count climb with the data, while canvas holds both flat.

Turn it on

Import the feature and set the renderer. That is the whole change:

import ApexCharts from 'apexcharts'
import 'apexcharts/features/renderer-canvas'

const chart = new ApexCharts(document.querySelector('#chart'), {
  series: [{ name: 'Value', data: bigArray }], // tens of thousands of points
  chart: {
    type: 'bar',
    renderer: 'canvas',       // always canvas
    // renderer: 'auto',      // canvas only above rendererThreshold
    rendererThreshold: 8000,  // the 'auto' cutoff, in data points
    zoom: { enabled: true, type: 'x', autoScaleYaxis: true },
  },
  dataLabels: { enabled: false }, // labels stay SVG; one per bar is unreadable at this density
})
chart.render()

'auto' is the option you usually want in production: small charts render as SVG (with full interactivity), and only the ones that cross the threshold promote to canvas. Check which is active at runtime:

chart.getActiveRenderer() // 'svg' | 'canvas'

What stays SVG (and why that is the point)

Strata is deliberately a hybrid. The layers where SVG earns its keep, crisp text and rich interaction, stay SVG; only the data-heavy body layer moves to canvas.

Because the chrome is still SVG, zoom, pan, and the shared tooltip work exactly as they do in SVG mode. You are not trading away interaction on the axes; you are only changing how the dense body is painted.

What falls back to SVG automatically

A few series styles cannot be expressed on the canvas fast-path, so Strata silently falls back to SVG for them rather than dropping the effect:

• Pattern and image fills on the series.
• Color-matrix filters (certain advanced fill/effect combinations).

And a few capabilities remain SVG-only by design, so they are not available on the canvas body layer in v1:

• Per-point selection visuals (the highlight on a clicked element).
• Keyboard traversal of individual data points.
• Per-point (intersect) tooltips, the kind a scatter uses by default. Capturing the exact mark under the cursor needs per-element hit-testing, which the canvas layer does not have. Shared, x-positioned tooltips (line, area, bar) still work on canvas, because they resolve by coordinate, not by the element under the pointer.

If your chart depends on those, keep it on SVG or use 'auto' so only the oversized datasets promote.

The real tradeoff

The honest framing is a swap, not a free win:

The DOM-node count is a structural fact, not a benchmark: a canvas series is one node no matter how many points it holds, while an SVG series is one node per element. The live demo shows both directly, and its Benchmark both button times the same data as SVG and as canvas on your own machine. We do not print a render-time number here, because it depends on point count, device, and browser, and any figure would not match your hardware. One thing the benchmark keeps honest: at small point counts canvas is not faster, because it carries a fixed setup cost. Canvas wins at scale, which is exactly why the renderer is opt-in.

When to use it, and when not to

Use canvas when the series has enough elements that per-node overhead is the bottleneck: dense bar charts, large scatter plots, long candlestick or OHLC histories, anything in the ten-thousands of points and up. 'auto' with a sensible rendererThreshold is the safest way to get this only where it is needed.

Keep SVG when the chart is ordinary sized and you value per-element styling, click hit-testing on individual points, or keyboard accessibility of the data. For most charts on most pages, SVG is still the right default, which is exactly why canvas is opt-in.

If you want the conceptual background on why SVG and canvas behave so differently at scale, see our older explainer, SVG vs canvas charts.

Summary

Strata gives ApexCharts a canvas renderer without giving up what makes SVG good. Set chart.renderer to 'canvas' or 'auto', and the dense series bodies paint to a single canvas while axes, grid, zoom, tooltips, data labels, and annotations stay SVG. The win is a flat DOM-node count for the data layer; the cost is per-element access on that layer, which is why the chrome stays SVG and the whole thing is opt-in. Use 'auto' with rendererThreshold to get SVG for small charts and canvas for large ones automatically, and chart.getActiveRenderer() to see which is live. See the canvas renderer guide for the full reference, and the rest of ApexCharts 6.0.

Frequently asked questions