Pivot Charts Configurator

The Pivot Charts configurator gives users Layout and Display controls beside a chart. It uses the same shared field-list presentation as the Grid and Pivot configurators, while Pivot Charts owns chart-specific field placement and query behavior.

Try the configurator

Interactive example

Configure a chart

Explore the built-in Layout and Display controls on a linked sales chart.

Try it: Use Layout to choose fields and measures or Display to change labels, legend and colors.

The example loads when visible.

Reset

What to notice: Valid changes update the chart automatically.

The configurator is open beside the chart. In Layout, search the Fields list or choose a different measure. In Display, change a title, legend position or color. The chart updates as valid changes are made.

Enable the configurator

Register PivotPlugin, PivotChartsPlugin and PivotChartsUiPlugin as shown in Getting Started. Starting with that initialized grid, mount a chart with standard controls:

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

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

// Release the chart and its controls when the application view unmounts.
// chart.destroy();

Follow Your First Linked Chart for the complete setup and live example. Chart dialogs include their own settings panel.

Layout: fields and measures

Use Layout to search available fields, add row or column fields, reorder or remove assigned fields, and select measures. Sorting, ranking, member filters and the Pivot connection have separate sections. Valid query edits update automatically; collapsing a section preserves its draft.

These are chart-local choices. They do not add missing measures to the owning Pivot report. Add the required numeric field to the Pivot’s Values first, then select it for the chart. See Choose Data and Measures for query and connection behavior.

The Fields list reuses the UI library’s clean field styles: compact rows, consistent spacing and no table separators. The chart library supplies placement controls rather than the Grid configurator’s column-visibility checkboxes.

Display: appearance

Use Display for labels and legend, appearance, axes, colors, navigation, interaction and references. Available controls depend on the chart type and configured UI policy. Valid edits update automatically; incomplete numeric or reference edits remain local until valid.

See Appearance and Formatting for saved model settings, renderer styling and formatting.

Place settings in a drawer

Set grid.pivotChartsUi.miniMode to true to start chart settings as a compact rail. Selecting a rail button opens its settings tab. Use Collapse to return to the rail. Set resizable: true in the same options to enable width resizing. Dragging below 200 px collapses the panel to its rail.

For an embedded chart with standard controls, set pivotChartsUi.settingsMountTo before mounting it:

grid.pivotChartsUi = {
  settingsMountTo: document.querySelector<HTMLElement>('#chart-settings')!,
};

The chart stays in its chart container; settings render in the application-owned target. Your application opens and closes the drawer. Destroying the chart removes its controls from that target. This option does not relocate a chart dialog’s own settings panel.

Choose controls and translate labels

Use pivotChartsUi.controls to hide or disable supported controls and sections. Customize headings and labels through locale settings. Keep these policies in the host application; the configurator uses native chart operations to validate and apply changes.

See Controls and Localization for the live policy example, supported control IDs, translations and lifecycle details.

Custom sections and AI

Append custom tabs through pivotChartsUi.sections. Each section supplies id, label, optional hidden/disabled flags, and render() or mount(host). Set pivotChartsUi.initialSection to choose the starting tab and onSectionChange to observe navigation. Built-in Chart, Layout and Display tabs keep their existing control policies.

The live example includes an AI tab. Try Switch to horizontal bars or Inspect the chart settings. It reuses the existing assistant and Pivot Charts action adapters with local scripted interpretation; no model backend is contacted.

See Custom sections and AI for the shared contract and createAiConfiguratorSection setup. Configure the assistant with createPivotChartsAiActions(charts, options) from @revolist/pivot to enable chart operations.