Skip to content
RevoGrid [Pro]

Create Your First Pivot Chart

Add a chart to the same sales report used in Pivot Getting Started. Pivot groups the source records; the chart draws those grouped values.

Interactive example

Your first linked chart

Chart the same sales report shown in your Pivot table.

Try it: Switch chart type, filter to North, then show all regions.

The example loads when visible.

What to notice: The chart and table update together. Only North totals $600; all regions total $1,000.

TypeScript source

Use this code in your app after installing the packages described in this guide.

first-pivot.ts
import { defineCustomElements } from '@revolist/revogrid/loader';
import { PivotPlugin, PivotChartsPlugin, createPivotChartsRenderer, mountPivotChart } from '@revolist/pivot';
import { orders, salesReport } from './sales-data';
import '@revolist/revogrid-pro/dist/revogrid-pro.css';
import '@revolist/pivot/styles.css';


// Register the grid once in your application.
defineCustomElements();
await customElements.whenDefined('revo-grid');


export const grid = document.createElement('revo-grid');
grid.style.height = '280px';
grid.plugins = [PivotPlugin, PivotChartsPlugin];
grid.pivot = salesReport;
grid.pivotCharts = { renderer: createPivotChartsRenderer() };
grid.source = orders;
document.body.append(grid);


const container = document.createElement('div');
container.style.height = '320px';
document.body.append(container);


export const chart = await mountPivotChart(grid, {
  container,
  chartType: 'groupedColumn',
});
Download first-pivot.ts

Try it: choose Switch chart type to compare horizontal bars with columns. Choose Only North to filter both views, then All regions to restore the complete report. Reset returns to the initial example.

Install

Section titled “Install”
Terminal window
pnpm add @revolist/revogrid @revolist/revogrid-pro @revolist/pivot

Use the package/license setup from Pivot Getting Started. The following TypeScript runs in a browser application with a bundler.

Register Pivot Charts

Section titled “Register Pivot Charts”

Open TypeScript source below the live example and download both files into the same directory:

  • first-pivot.ts creates the grid with both plugins, then mounts its chart.
  • sales-data.ts contains the orders and report configuration.

Import the example from your application’s browser entry point:

import { chart } from './first-pivot';

mountPivotChart waits for the initial Pivot report automatically. The setup does not need to look up the Pivot plugin or call updatePivotConfig. Both views are appended to document.body. Replace that parent with your application’s container as needed.

The report shows North: $600, South: $300 and West: $100, split by Q1 and Q2. The grand total is $1,000. Replace orders with your records and change the salesReport field names to match.

Change the chart type

Section titled “Change the chart type”

Use the same chart reference instead of creating another chart:

await chart.update({ chartType: 'line' });

The table and source data stay the same. Choose a Chart explains which types fit each question.

Chart with built-in controls

Section titled “Chart with built-in controls”

For a gallery, layout and display controls, add PivotChartsUiPlugin to the initial plugin list in first-pivot.ts:

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


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

Set controls: 'standard' in the chart mount in the same file:

const chart = await mountPivotChart(grid, {
  container,
  chartType: 'groupedColumn',
  controls: 'standard',
});

Use Layout for fields and measures, Display for appearance, and Data to inspect the plotted values. See containers and framework lifecycle for complete embedding, custom controls and framework cleanup.

Common setup problems

Section titled “Common setup problems”
  • Empty or zero-height plot: give the container an explicit height before mounting.
  • Plugin required: register PivotChartsPlugin; standard controls also need PivotChartsUiPlugin.
  • Unexpected values: inspect the Pivot table first. The chart uses its aggregated measures.
  • A chart remains after navigation: call chart.destroy() in application cleanup; see lifecycle.

Next steps

Section titled “Next steps”

Choose a Chart → Choose Data and Measures → Appearance and Formatting.