Canvas Renderer (Strata)

ApexCharts draws with SVG, which is why its tooltips, annotations, and exports are so capable: every mark is a real DOM node you can style and inspect. That same strength is a ceiling. Once a chart holds several thousand points, the browser is juggling thousands of SVG nodes and rendering turns sluggish.

Strata raises that ceiling without changing how you use the library. It is a hybrid renderer: below a node threshold your chart is ordinary SVG, and above it only the series layer (the lines, bars, or points themselves) moves onto a <canvas>. Everything else, the axes, grid, crosshair, tooltips, annotations, and PNG/SVG export, stays SVG. You get canvas throughput for the dense part and keep the full SVG feature set for the rest, with no separate "big data" chart type to learn.

See it live

The demo below draws the same dense series twice, once on SVG and once on canvas, and reports the active renderer and point count. Push the point count up and watch where SVG starts to strain while canvas holds its frame rate.

For the numbers behind this (frame times at 10k, 50k, and 100k points) see the deep dive: Break the SVG Ceiling: the Strata canvas renderer. For the general trade-off between the two backends, see SVG vs Canvas for Charts.

Where canvas helps

• Dense time series. Sensor, telemetry, or financial tick data with tens of thousands of points, where SVG's node count is the bottleneck.
• Large scatter plots. Many thousands of markers that would each be a separate SVG circle.
• Real-time streaming. Feeds that grow without bound, so the point count crosses the ceiling as the chart runs.
• Dashboards with many charts. Even moderate charts add up; moving the dense ones to canvas keeps the whole page's DOM-node budget in check.

Enable the feature

Canvas rendering is tree-shakeable. Import the feature, then choose a renderer:

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

const options = {
  chart: {
    renderer: 'auto',        // 'svg' | 'canvas' | 'auto'
    rendererThreshold: 8000, // 'auto' switches to canvas above this point count
  },
}

Without the import, the chart stays on SVG regardless of renderer. renderer: 'auto' is the recommended setting: it keeps small charts on crisp SVG and only crosses over when the point count passes rendererThreshold. See the chart.renderer options for every field.

What runs on canvas

Canvas is live for line, area, bar, column, scatter, candlestick, and heatmap, with shared tooltip, crosshair, zoom, pan, hover and legend dimming, and PNG / SVG export all working. Call chart.getActiveRenderer() to read what is actually in use ('svg', 'canvas', or 'gpu').

What stays SVG

• Grid, annotations, and dataLabels are always SVG, so crosshairs, annotations, exports, and label crispness are unaffected.
• Charts fall back to SVG automatically for canvas-unsupported features: pattern / image fills and color-matrix state filters.
• Per-point selection visuals and keyboard traversal on canvas remain SVG-only for now.

When to use canvas

Reach for canvas when you hit the SVG node ceiling, typically several thousand points, where the DOM-node count makes SVG feel heavy. Below that, keep the default SVG: it is crisper and supports every feature. Because renderer: 'auto' gives you both automatically, the safe default is to leave it on and set rendererThreshold to the point where your charts start to feel slow.

Strata ships as a tree-shakeable entry point; see the tree-shaking guide.