Charts Without a Grid

Use this path when your application already has the numbers to draw and needs no Pivot table. For a new general chart-only application, prefer Standalone Charts. Use a linked chart when the chart should follow a Pivot report.

Interactive example

A chart without a grid

Turn three region totals into a chart without creating a Pivot table.

Try it: Compare the column, bar and line views.

The example loads when visible.

Reset

What to notice: Every view shows North $600, South $300 and West $100.

TypeScript source

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

standalone-chart.ts

standalone-chart.ts

import { createStandalonePivotChart } from '@revolist/pivot/charts';
import { chartData } from './standalone-data';
import '@revolist/pivot/styles.css';

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

export const chart = await createStandalonePivotChart({
  container,
  dataset: chartData,
  chartType: 'groupedColumn',
});

Download standalone-chart.ts

standalone-data.ts

standalone-data.ts

import { createStandalonePivotChartDataset } from '@revolist/pivot/charts';

export const chartData = createStandalonePivotChartDataset([
  { region: 'North', sales: 600 },
  { region: 'South', sales: 300 },
  { region: 'West', sales: 100 },
], {
  category: { field: 'region' },
  series: [{ field: 'sales', label: 'Sales ($)' }],
});

Download standalone-data.ts

Try a line and column view of the same values. No grid is mounted in this example. The source tabs contain a direct setup in standalone-chart.ts and its data in standalone-data.ts; download both into the same directory.

Use charts without a grid

For new chart-only applications, use the independent @revolist/charts package. See the Standalone Charts guide and live example.

@revolist/pivot/charts provides a standalone controller for an ordinary DOM container. It creates no <revo-grid>, Pivot plugin, source query or editor.

import { createStandalonePivotChart, createStandalonePivotChartDataset } from '@revolist/pivot/charts';
import '@revolist/pivot/styles.css';

const container = document.createElement('div');
container.style.height = '320px';
document.body.append(container);
const dataset = createStandalonePivotChartDataset(
  [{ month: 'January', revenue: 120 }, { month: 'February', revenue: 180 }, { month: 'March', revenue: 160 }],
  { category: { field: 'month' }, series: [{ field: 'revenue', label: 'Revenue' }] },
);
const chart = await createStandalonePivotChart({ container, dataset, chartType: 'line' });

The builder maps each row to one category and each explicit numeric field to one series. Values must be finite numbers or explicit null. Typed category keys must be unique; duplicate keys are rejected, never aggregated. Its identity measure metadata is descriptive. Use the headless Pivot controller when source aggregation is needed.

category.label names a source field containing each row’s string display label; series.label supplies a literal series caption. For example, this keeps 'jan' as the category identity while displaying 'January':

const labeled = createStandalonePivotChartDataset(
  [{ month: 'jan', monthName: 'January', revenue: 120 }],
  { category: { field: 'month', label: 'monthName' }, series: [{ field: 'revenue', label: 'Revenue' }] },
);

Omit category.label to display the category key. When provided, the named field must contain a string in every row. Rename the data-table category header with localeText.dataTable.categoryHeader.

The controller owns data/settings snapshots. Updates run in order and capture caller patches immediately. undefined preserves an owner; {} resets it; arrays replace. Presentation is a replacement owner, so include titles you want to retain. Dataset replacement requires a complete canonical dataset. Save an unlinked chart.model and supply model instead of dataset/settings to restore. A creation signal cancels pending creation and disposes the chart on later abort. destroy() is idempotent; other operations reject after disposal.

interaction.mode: 'select' commits local selection; 'event' calls onSelectionRequest without committing. Applications commit with setSelection or clearSelection. Pivot drill/filter/query and peer synchronization require the grid plugin and are rejected here. Native navigation and legend visibility callbacks update controller state. Geographic charts retain their separate provider pack API, without controller/export parity.

The creation-time renderer is fixed. SVG is the default; an injected ECharts renderer supports its documented three types and PNG, plus controller CSV. capabilities intersects advertised export support with actual methods. Export operations share the update queue and capture the committed state when their turn begins. onBeforeDownload is synchronous; returning false cancels. Hooks receive owned snapshots. Custom renderer failures trigger an update rollback; if both fail the promise reports an AggregateError rather than claiming the old scene survived. Optional methods fail clearly when unavailable.

The low-level renderer remains available for applications owning their own state. Its update takes a complete render input, with caller-owned mutable data; use fresh inputs and callbacks deliberately. The chart facade preserves root module identities and does not promise a dependency-isolated bundle or SSR rendering. DOM-free imports and data building are supported.

The chart entrypoint also exports the existing types used by these integrations: PivotChartCsvOptions and PivotChartImageOptions for reusable export settings, PivotChartNodeClick for callbacks, renderer theme/label/tooltip/PDF types, and the ECharts, vector-PDF, and geographic provider contracts. Import them with import type from @revolist/pivot/charts; the root package exports the same types.

Next steps

If source records need grouping first, use Headless Pivot. See save and restore and renderer support.