Canvas Renderer (Strata)

Strata is the hybrid SVG plus canvas renderer introduced in ApexCharts 6.0. Below a node threshold the output is identical SVG. Above it, only the series layer is drawn to a <canvas> while axes, grid, tooltips, annotations, and exports stay SVG, so you break the SVG node ceiling without giving up the SVG feature set.

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. See the chart.renderer options for every field.

What runs on canvas

Canvas is live for line, area, bar, column, scatter, and candlestick, 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

Switch to canvas when you hit the SVG node ceiling, typically several thousand points where the DOM node count makes SVG sluggish. Below that, keep the default SVG: it is crisper and supports every feature. renderer: 'auto' gives you both, staying on SVG until the point count crosses rendererThreshold.

For the tradeoffs between the two backends, see SVG vs Canvas for Charts. Strata ships as a tree-shakeable entry point; see the tree-shaking guide.