Containers and Framework Lifecycle

Use Getting Started for the shortest working example. This guide covers embedded workspaces, application controls, framework mounting and the optional dialog. The chart needs an existing container with a non-zero height.

Register Pivot Charts

Use the grid creation and sales data from Getting Started. Set both plugins, the report and the renderer during grid initialization, before appending the grid:

import {
  PivotChartsPlugin,
  PivotPlugin,
  createPivotChartsRenderer,
} from '@revolist/pivot';

grid.plugins = [PivotPlugin, PivotChartsPlugin];
grid.pivot = salesReport;
grid.source = orders;
grid.pivotCharts = { renderer: createPivotChartsRenderer() };

grid.pivotCharts is observable. Replacing the configuration updates locale text and defaults, invalidates cached chart data, and refreshes linked charts. This is where renderer options, a remote data provider, defaults, limits, localization, and drill synchronization belong. The application container is supplied later, when it exists.

Render a chart outside the Pivot grid

This grid-linked API still requires a RevoGrid and Pivot plugins, even though the chart container is outside the grid. mountPivotChart() renders into any application-owned HTMLElement.

Experience	Plugins	Mount option
Chart only	PivotPlugin + PivotChartsPlugin	Omit controls
Chart with your own controls	PivotPlugin + PivotChartsPlugin	Omit controls, then call chart.update()
Chart with built-in controls	Add PivotChartsUiPlugin	controls: 'standard'

All three render in your container. None creates a popup.

Chart only

<div id="sales-chart" style="height: 420px"></div>

import { mountPivotChart } from '@revolist/pivot';

const chart = await mountPivotChart(grid, {
  container: document.querySelector<HTMLElement>('#sales-chart')!,
  presentation: { title: 'Sales by region' },
});

This mount uses the grid configured above and waits for its initial Pivot report. The chart defaults to grouped columns and stays linked to the report.

Chart with built-in controls

Include PivotChartsUiPlugin in the initial grid.plugins list, then use controls: 'standard' in place of the chart-only mount:

import {
  PivotChartsPlugin,
  PivotChartsUiPlugin,
  PivotPlugin,
  mountPivotChart,
} from '@revolist/pivot';

grid.plugins = [PivotPlugin, PivotChartsPlugin, PivotChartsUiPlugin];

const chart = await mountPivotChart(grid, {
  container: document.querySelector<HTMLElement>('#chart-workspace')!,
  controls: 'standard',
});

This embeds the same chart gallery, Layout and Display tabs, drill breadcrumbs, current-frame table, and export actions used by the standard dialog. The application still owns the outer container.

Chart with your own controls

Use the chart-only mount and connect only the controls your product needs:

const chart = await mountPivotChart(grid, { container });

typeSelect.addEventListener('change', () => {
  void chart.update({
    chartType: typeSelect.value as PivotChartType,
  });
});

Use chart.update() for selected series, bindings, totals, link state, presentation, theme, or chart-specific options. You do not need the UI plugin for application-built controls.

Mount after the DOM exists

Interactive example

Mount and open charts

Example for Mount and open charts

Open the chart dialog while keeping the Pivot grid accessible.

The example loads when visible.

Reset

The container must exist when mountPivotChart() runs. In Vue, React, and other component frameworks, mount the chart in the framework’s mounted effect and destroy it during cleanup. Register the revo-grid custom element once in the application before mounting this component; keep sales-data.ts from Getting Started beside it.

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import {
  PivotPlugin, PivotChartsPlugin, createPivotChartsRenderer, mountPivotChart,
  type PivotChartRef,
} from '@revolist/pivot';

import { orders, salesReport } from './sales-data';

const plugins = [PivotPlugin, PivotChartsPlugin];
const pivotCharts = { renderer: createPivotChartsRenderer() };
const grid = ref<HTMLRevoGridElement>();
const container = ref<HTMLElement>();
let chart: PivotChartRef | undefined;
let disposed = false;

onMounted(async () => {
  const mounted = await mountPivotChart(grid.value!, {
    container: container.value!,
  });
  if (disposed) mounted.destroy();
  else chart = mounted;
});

onBeforeUnmount(() => {
  disposed = true;
  chart?.destroy();
});
</script>

<template>
  <revo-grid ref="grid" :plugins="plugins" :pivot.prop="salesReport" :pivot-charts.camel.prop="pivotCharts" :source="orders" />
  <div ref="container" class="chart" />
</template>

<style>
.chart { height: 420px; }
</style>

Use the equivalent mounted effect for React. In an Astro portal, call mountPivotChart() immediately after the portal target has been appended. An existing container may start hidden and become visible later: the built-in renderer uses ResizeObserver and redraws when its size changes. Give it a non-zero height when visible. Do not place a container, selector, or ref in grid.pivotCharts or grid.pivotChartsUi.

Open the modeless dialog

PivotChartsUiPlugin.openChart() remains available for an application toolbar or the Pivot Chart… context-menu action. A grid owns at most one open dialog, but it may also own any number of embedded charts.

Right-clicking a Pivot analytical cell creates a cell-aware initial scope:

• a group value opens its immediate children;
• a leaf value opens its siblings under the same parent;
• subtotal and grand-total cells choose the nearest valid breakdown;
• the clicked column path and measure become the initial series;
• values-on-rows preserve the clicked row measure.

The scope comes from committed Pivot row and column metadata, not DOM text or a stale grid selection.

What stays synchronized

Linked charts refresh after committed Pivot changes, filtering, sorting, group expansion, source replacement, and theme changes. Unlinking stores a bounded normalized dataset in the chart model; the snapshot then remains stable until the chart is relinked.

Use the Layout tab to choose totals, relationship bindings, drill synchronization, and link state. Use Display for presentation and chart-specific options. Data switches the plot to the accessible table for the current drill frame without mutating the Pivot or chart model.

Next steps

See controls and localization, API and lifecycle and save and restore.