Renderers and Capabilities

The built-in SVG renderer works without another charting dependency. Choose an alternative only when its supported features fit your workload. A renderer draws a dataset; it does not replace server data loading or calculate missing aggregates.

Choose a renderer for the interactions and exports your application needs. Renderer choice does not replace the server data contract or provide backend aggregation.

Optional ECharts Canvas renderer

Applications can inject a modular ECharts runtime through the existing renderer configuration. Pivot does not import or fetch ECharts at runtime:

import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { createPivotChartsEChartsRenderer } from '@revolist/pivot';

echarts.use([
  BarChart, LineChart, GridComponent, LegendComponent,
  TitleComponent, TooltipComponent, CanvasRenderer,
]);

grid.pivotCharts = {
  renderer: createPivotChartsEChartsRenderer(echarts),
};

Choose the renderer before creating a chart. The adapter supports groupedColumn, groupedBar, and line, basic presentation, grid lines, and PNG export. Pointer activation uses the original canonical cell. A bounded HTML inspector provides keyboard access to finite values without creating one DOM node per value. Null line values remain gaps.

The adapter rejects authored axes, colors, series overrides, navigation, annotations, selection, cross-highlighting, and unsupported chart options. It preserves the complete dataset and existing projection limits. It does not provide automatic aggregation, SVG/vector export, or an automatic backend switch. Use the default SVG renderer when those features are required.

Renderer preview performance

The gallery uses the same chart definitions and renderer functions as full charts, but with renderMode: 'preview'. Preview mode is decorative and omits tooltips and interactive focus targets. Intersection-based mounting defers a preview until its card approaches the viewport. SVG snapshots are cached by type, renderer, theme, and locale. Canvas previews are recreated on remount, because cloning DOM nodes does not copy a Canvas bitmap. Their compact layout hides axes, titles, legends, and labels.

Geographic capability

Interactive example

Renderer choices and geographic capabilities

Example for Renderer choices and geographic capabilities

Compare supported column, bar, and line views rendered with ECharts Canvas.

The example loads when visible.

Reset

Geographic views are opt-in because map geometry, projections, tiles, and licenses belong to the provider:

const pack = createPivotChartGeographicCapabilityPack(provider);

const chart = pack.render({ container, request, localeText });
await chart.ready;

request supplies the chart type, dataset, bindings, theme and viewport. localeText supplies the map labels. See the complete geographic setup for sample data and a provider.

The pack exposes choropleth, proportionalSymbolMap, and geographicHeatmap. These views are not built-in gallery types and do not change PivotChartModel. Importing Pivot Charts alone loads no geographic assets or map dependency.

Next steps

See your first chart, data and measures and the API reference.