Skip to content

Batched SVG rendering

Set chartOptions.rendererPolicy to 'batched-svg' for groupedColumn, groupedBar or scatter. Omission and explicit 'svg' retain individual SVG marks. The policy is saved with the chart model. Public types are ChartSvgRendererPolicy and PivotChartSvgRendererPolicy; ChartTypeOptions / PivotChartOptions expose the optional field. Unknown values and the option on other chart families reject atomically. There is no automatic size threshold. Standalone Charts and Pivot share the policy and implementation; Pivot exposes it through the existing chart appearance options.

await chart.update({ chartOptions: { rendererPolicy: 'batched-svg' } });

The renderer groups matching geometry into SVG paths with at most 2,048 shapes per path. Canonical data, domains, raw CSV/data views and axis geometry remain owned by the existing data/geometry pipeline. Scatter supports M1 numeric X/Y windows, including named axes; bars retain their existing category navigation and fixed numeric bounds, without adding Y-window navigation in M2. Native bar scrolling remains available when no explicit window is supplied.

Accessible keyboard inspection uses a geometry index and a constant number of transient SVG proxies. Arrow keys traverse eligible source observations; Home/End jump to the ends; Enter/Space activate the current raw datum. Nulls and fully clipped geometry have no inspection target. Pointer hits use visible shape geometry and resolve coincident marks to the last painted observation. Scatter callbacks retain raw X/Y channel values. Resizing/navigation rebuild the index from the same geometry used to draw the paths. Focus restoration follows the canonical category/series.

Per-item DOM selectors, event listeners attached to individual marks, classes, CSS rules keyed by datum attributes, and DOM mutation of individual shapes are unsupported in batched mode. External stylesheets cannot be inspected reliably: select 'svg' explicitly when relying on them. A batched path is not one datum.

Deterministic whole-chart fallback to single-item SVG applies when runtime rendererOptions.elements or rendererOptions.onRender is supplied, when saved color maps/member/measure styling or a color binding requires per-item paint, when authored stack groups are present on grouped bars, when the dataset contains derived series or synthetic aggregate categories, or when selection/peer highlight styling is active. The saved policy stays unchanged. The SVG reports data-chart-renderer-policy and, on fallback, data-chart-renderer-fallback. Clearing incompatible saved colors, stack groups or source selection restores batching on the next paint. Runtime renderer options are captured at creation: recreate the chart/renderer to remove elements or onRender. Runtime callbacks remain runtime-only. Use 'svg' when per-item customization is required; batching does not silently discard supported styles.

Opacity and stroke are applied to each compound path: overlapping scatter shapes within a chunk share compositing, so overlap darkness can differ from individual circles. Use svg when per-point alpha accumulation is required.

SVG/image/PDF exports preserve the persistent batched paths; transient inspection proxies are excluded from clean exports. CSV retains raw values and existing viewport membership semantics. SSR uses the same native renderer and policy; no browser-only resources are stored in the model.

See measured performance and budgets for reference hardware, timings and the 100k optimization results. Batched SVG is opt-in. Optional WebGL has a separate capability and fallback contract; see WebGL.

Authored seriesOverrides[id].encoding or runtime rendererOptions.datumStyle forces individual SVG with datum-style fallback. See datum styling for fields, precedence, persistence and capability limits.