Skip to content

Pivot Charts

HTMLRevoGridElement (Extended from global)

Section titled “HTMLRevoGridElement (Extended from global)”
interface HTMLRevoGridElement {
/**
* Renderer, complete-data provider, defaults, and safety limits for
* renderer-neutral Pivot Charts.
*/
pivotCharts?: PivotChartsConfig;
/**
* Optional modeless-dialog and context-menu integration for Pivot Charts.
*/
pivotChartsUi?: PivotChartsUiConfig
}

HTMLRevoGridElementEventMap (Extended from global)

Section titled “HTMLRevoGridElementEventMap (Extended from global)”
interface HTMLRevoGridElementEventMap {
'pivot-chart-created': PivotChartCreatedEventDetail;
'pivot-chart-updated': PivotChartUpdatedEventDetail;
'pivot-chart-destroyed': PivotChartDestroyedEventDetail;
'pivot-chart-node-click': PivotChartNodeClickEventDetail;
'pivot-chart-error': PivotChartErrorEventDetail;
'pivot-chart-before-drill': PivotChartDrillEventDetail;
'pivot-chart-drill-start': PivotChartDrillEventDetail;
'pivot-chart-drilled': PivotChartDrilledEventDetail;
'pivot-chart-drill-error': PivotChartDrillErrorEventDetail;
'pivot-chart-drill-reset': PivotChartDrilledEventDetail;
'pivot-chart-drill-sync': PivotChartDrillSyncEventDetail
}
export function toPivotChartError(
error: unknown,
fallbackCode: PivotChartErrorCode = 'CHART_UPDATE_FAILED',
);

export type PivotChartErrorCode =
| 'PIVOT_NOT_ACTIVE'
| 'RENDERER_REQUIRED'
| 'UNSUPPORTED_CHART_TYPE'
| 'INVALID_DATA_SHAPE'
| 'INVALID_SERIES_SELECTION'
| 'LIMIT_EXCEEDED'
| 'SERVER_PROVIDER_REQUIRED'
| 'SERVER_RESPONSE_INCOMPLETE'
| 'CAPABILITY_UNAVAILABLE'
| 'CHART_ID_CONFLICT'
| 'CHART_UPDATE_FAILED';

class PivotChartError {}

PIVOT_CHART_CREATED_EVENT: string;

PIVOT_CHART_UPDATED_EVENT: string;

PIVOT_CHART_DESTROYED_EVENT: string;

PIVOT_CHART_NODE_CLICK_EVENT: string;

PIVOT_CHART_ERROR_EVENT: string;

PIVOT_CHART_BEFORE_DRILL_EVENT: string;

PIVOT_CHART_DRILL_START_EVENT: string;

PIVOT_CHART_DRILLED_EVENT: string;

PIVOT_CHART_DRILL_ERROR_EVENT: string;

PIVOT_CHART_DRILL_RESET_EVENT: string;

PIVOT_CHART_DRILL_SYNC_EVENT: string;

Produces the renderer-neutral, tidy analytical frame for a projected Pivot dataset. Each matrix cell becomes one observation with stable category, series, and measure field IDs.

export function createPivotChartAnalyticalFrame(
dataset: Pick<
PivotChartDataset,
'categories' | 'series' | 'values' | 'displayValues' | 'hierarchies'
>,
labels: {
category: string;
series: string;
} = {
category: PIVOT_CHART_CATEGORY_FIELD_ID,
series: PIVOT_CHART_SERIES_FIELD_ID,
},
): PivotChartAnalyticalFrame;

export function ensurePivotChartAnalyticalFrame(
dataset: PivotChartDataset,
): PivotChartDataset;

PIVOT_CHART_CATEGORY_FIELD_ID: string;

PIVOT_CHART_SERIES_FIELD_ID: string;

export function getPivotChartDefinition(
chartType: PivotChartType,
): PivotChartDefinition<PivotChartType>;

export type PivotChartFamily =
| 'column'
| 'bar'
| 'line'
| 'area'
| 'partToWhole'
| 'relationship'
| 'hierarchical'
| 'combination'
| 'statistical'
| 'specialized'
| 'kpi'
| 'polar'
| 'distribution'
| 'matrix'
| 'process'
| 'flow'
| 'financial';

export type PivotChartDataChannel =
| 'category'
| 'series'
| 'value'
| 'x'
| 'y'
| 'size'
| 'hierarchy'
| 'weight'
| 'source'
| 'target'
| 'start'
| 'end'
| 'low'
| 'high'
| 'open'
| 'close'
| 'volume'
| 'actual'
| 'target'
| 'variance'
| 'color'
| 'shape'
| 'angle'
| 'radius'
| 'parent'
| 'child'
| 'facetRow'
| 'facetColumn'
| 'label'
| 'tooltip';

interface PivotChartChannelRequirement {
channel: PivotChartDataChannel;
min: number;
max?: number
}

interface PivotChartDefinition {
type: TType;
localization: {
labelKey: TType;
descriptionKey: TType;
};
family: PivotChartFamily;
order: number;
dataView:
| 'matrix'
| 'xy'
| 'hierarchy'
| 'binned'
| 'distribution'
| 'statistical'
| 'range'
| 'flow'
| 'financial'
| 'kpi'
| 'calendar';
channels: readonly PivotChartChannelRequirement[];
constraints: {
nonNegative: boolean;
rowHierarchy: boolean;
seriesSelection: 'all' | 'firstAvailable';
};
interactions: {
drill: boolean;
selection: boolean;
zoom: boolean;
pan: boolean;
labels: boolean;
stacking: boolean;
};
presentation: {
axes: boolean;
legend: 'series' | 'category' | 'none';
};
preview: {
dataset: PivotChartDataset;
bindings: PivotChartBindings;
presentation: PivotChartPresentation;
aspectRatio: number;
};
options: PivotChartOptionsSchema;
renderer: PivotChartRenderFunction;
documentationSlug: string
}

PIVOT_CHART_DEFINITIONS: readonly [PivotChartDefinition<"groupedColumn">, PivotChartDefinition<"stackedColumn">, PivotChartDefinition<"normalizedColumn">, PivotChartDefinition<"groupedBar">, PivotChartDefinition<"stackedBar">, PivotChartDefinition<"normalizedBar">, PivotChartDefinition<"line">, PivotChartDefinition<"smoothLine">, PivotChartDefinition<"steppedLine">, PivotChartDefinition<"area">, PivotChartDefinition<"steppedArea">, PivotChartDefinition<"stackedArea">, PivotChartDefinition<"normalizedArea">, PivotChartDefinition<"pie">, PivotChartDefinition<"donut">, PivotChartDefinition<"treemap">, PivotChartDefinition<"sunburst">, PivotChartDefinition<"scatter">, PivotChartDefinition<"bubble">, PivotChartDefinition<"columnLine">, PivotChartDefinition<"areaLine">, PivotChartDefinition<"rangeColumn">, PivotChartDefinition<"rangeBar">, PivotChartDefinition<"rangeArea">, PivotChartDefinition<"confidenceBand">, PivotChartDefinition<"errorInterval">, PivotChartDefinition<"waterfall">, PivotChartDefinition<"lollipop">, PivotChartDefinition<"bullet">, PivotChartDefinition<"semiDonut">, PivotChartDefinition<"rose">, PivotChartDefinition<"radarLine">, PivotChartDefinition<"radarArea">, PivotChartDefinition<"polarColumn">, PivotChartDefinition<"stackedPolarColumn">, PivotChartDefinition<"normalizedPolarColumn">, PivotChartDefinition<"radialBar">, PivotChartDefinition<"multiRingRadialBar">, PivotChartDefinition<"histogram">, PivotChartDefinition<"stripDot">, PivotChartDefinition<"heatmap">, PivotChartDefinition<"calendarHeatmap">, PivotChartDefinition<"densityScatter">, PivotChartDefinition<"icicle">, PivotChartDefinition<"circlePacking">, PivotChartDefinition<"funnel">, PivotChartDefinition<"pyramid">, PivotChartDefinition<"boxPlot">, PivotChartDefinition<"violin">, PivotChartDefinition<"rangeInterval">, PivotChartDefinition<"sankey">, PivotChartDefinition<"chord">, PivotChartDefinition<"candlestick">, PivotChartDefinition<"ohlc">, PivotChartDefinition<"volumePrice">, PivotChartDefinition<"gauge">, PivotChartDefinition<"kpi">, PivotChartDefinition<"progressGauge">, PivotChartDefinition<"connectedScatter">, PivotChartDefinition<"waffle">, PivotChartDefinition<"smallMultiples">, PivotChartDefinition<"annotatedTimeSeries">, PivotChartDefinition<"timelineRange">];

export type PivotChartType =
typeof PIVOT_CHART_DEFINITIONS[number]['type'];

PIVOT_CHART_TYPES: readonly ("line" | "area" | "kpi" | "groupedColumn" | "stackedColumn" | "normalizedColumn" | "groupedBar" | "stackedBar" | "normalizedBar" | "smoothLine" | "steppedLine" | "steppedArea" | "stackedArea" | "normalizedArea" | "pie" | "donut" | "treemap" | "sunburst" | "scatter" | "bubble" | "densityScatter" | "connectedScatter" | "columnLine" | "areaLine" | "rangeColumn" | "rangeBar" | "rangeArea" | "confidenceBand" | "errorInterval" | "waterfall" | "lollipop" | "bullet" | "semiDonut" | "rose" | "radarLine" | "radarArea" | "polarColumn" | "stackedPolarColumn" | "normalizedPolarColumn" | "radialBar" | "multiRingRadialBar" | "histogram" | "stripDot" | "heatmap" | "calendarHeatmap" | "icicle" | "circlePacking" | "funnel" | "pyramid" | "boxPlot" | "violin" | "rangeInterval" | "sankey" | "chord" | "candlestick" | "ohlc" | "volumePrice" | "gauge" | "progressGauge" | "waffle" | "smallMultiples" | "annotatedTimeSeries" | "timelineRange")[];

Resolves definitions for a standalone geographic capability host.

Geographic types are intentionally not accepted by PivotChartModel or the built-in Pivot Charts gallery/renderer. Applications render them explicitly through pack.render(...), which keeps provider assets and asynchronous map projection outside the core plugin lifecycle.

export function getPivotChartCatalogExtensionDefinitions(
pack?: PivotChartGeographicCapabilityPack,
): readonly PivotChartCatalogExtensionDefinition[];

export type PivotChartCatalogExtensionDefinition =
PivotChartGeographicDefinition;

export function evaluatePivotChartCatalog(
context: PivotChartCompatibilityContext,
): PivotChartCompatibility[];

export function evaluatePivotChartCompatibility(
chartType: PivotChartType,
context: PivotChartCompatibilityContext,
): PivotChartCompatibility;

export function resolveRelationshipBindings(
channels: readonly Extract<PivotChartBindingChannel, 'x' | 'y' | 'size'>[],
dataset: PivotChartDataset,
current: PivotChartBindings,
rebindWhenIncomplete = false,
): PivotChartBindings | undefined;

export type PivotChartCompatibilityStatus =
| 'recommended'
| 'compatible'
| 'needsFields'
| 'unsupported';

export type PivotChartCompatibilityReason =
| { code: 'rendererUnsupported' }
| { code: 'categoriesRequired'; minimum: number }
| { code: 'seriesRequired'; minimum: number }
| { code: 'seriesLimit'; maximum: number }
| { code: 'singleSeriesRequired' }
| { code: 'rowHierarchyRequired' }
| { code: 'dateCategoriesRequired' }
| { code: 'distributionViewRequired' }
| { code: 'nonNegativeValuesRequired' }
| {
code: 'channelRequired';
channel: Extract<
PivotChartBindingChannel,
| 'x'
| 'y'
| 'size'
| SpecializedSeriesChannel
| 'source'
| 'target'
| 'weight'
>;
}
| { code: 'noCompletePoints' }
| { code: 'nonNegativeSizeRequired' };

interface PivotChartCompatibility {
chartType: PivotChartType;
status: PivotChartCompatibilityStatus;
reasons: readonly PivotChartCompatibilityReason[];
score: number;
inferredPatch?: PivotChartUpdatePatch
}

interface PivotChartCompatibilityContext {
dataset?: PivotChartDataset;
model: PivotChartModel;
supportedTypes: readonly PivotChartType[]
}

export function createInitialRowDrillState(
scope: PivotChartInitialScope,
revision: number | null = null,
): PivotChartDrillState;

export function canDrillIntoCategory(category: PivotChartCategory);

export function canDrillIntoSeries(series: PivotChartSeries);

export function canDrillIntoTarget(target: PivotChartDrillTarget);

export function createRowDrillFrame(
category: PivotChartCategory,
): PivotChartDrillFrame;

export function appendRowDrillFrame(
state: PivotChartDrillState,
category: PivotChartCategory,
revision: number,
): PivotChartDrillState;

export function appendDrillFrame(
state: PivotChartDrillState,
target: PivotChartDrillTarget,
revision: number,
): PivotChartDrillState;

export function drillToFrame(
state: PivotChartDrillState,
frameIndex: number,
revision: number,
): PivotChartDrillState;

export function getParentDrillState(
state: PivotChartDrillState,
revision: number,
);

export function reconcileDrillState(
state: PivotChartDrillState,
pathDepth: number,
revision: number,
);

export function createRootPivotChartDrillState(
revision: number | null = null,
): PivotChartDrillState;

Parses untrusted JSON into a validated, deeply owned V2 model.

export function parsePivotChartModel(input: unknown): PivotChartModel;

export function clonePivotChartModel(model: PivotChartModel): PivotChartModel;

Mounts a Pivot Chart into an application-owned container.

Call this after the container exists (for example, in Vue onMounted) and call destroy() on the returned ref during application cleanup. The built-in renderer observes the existing container, so a container that is initially hidden can become visible later.

Example:

const chart = await mountPivotChart(grid, {
container: document.querySelector('#sales-chart')!,
presentation: { title: 'Sales by region' },
});
// Or embed the built-in configuration UI:
const configurableChart = await mountPivotChart(grid, {
container: document.querySelector('#chart-editor')!,
controls: 'standard',
});
export async function mountPivotChart(
grid: HTMLRevoGridElement,
{
controls = 'none',
...params
}: PivotChartMountParams,
): Promise<PivotChartRef>;

export type PivotChartMountControls = 'none' | 'standard';

PivotChartMountParams (Extended from index.ts)

Section titled “PivotChartMountParams (Extended from index.ts)”
interface PivotChartMountParams {
/**
* `none` renders only the chart. `standard` embeds the built-in gallery,
* data, customization, drill, table, and export controls.
*
* @defaultValue `'none'`
*/
controls?: PivotChartMountControls
}

export function createPivotChartOptionsSchema({
family,
axes,
chartType,
}: PivotChartOptionSchemaContext): PivotChartOptionsSchema;

export function parsePivotChartOptions(
value: unknown,
schema: PivotChartOptionsSchema,
): PivotChartOptions;

export function resolvePivotChartOption(
options: PivotChartOptions | undefined,
schema: PivotChartOptionsSchema,
key: PivotChartOptionKey,
): PivotChartJsonValue | undefined;

export type PivotChartOptionKey =
| 'showGridLines'
| 'markOpacity'
| 'strokeWidth'
| 'fillOpacity';

interface PivotChartBooleanOptionDefinition {
key: PivotChartOptionKey;
control: 'boolean';
defaultValue: boolean
}

interface PivotChartRangeOptionDefinition {
key: PivotChartOptionKey;
control: 'range';
defaultValue: number;
min: number;
max: number;
step: number
}

export type PivotChartOptionDefinition =
| PivotChartBooleanOptionDefinition
| PivotChartRangeOptionDefinition;

interface PivotChartOptionsSchema {
fields: readonly PivotChartOptionDefinition[];
defaults: Readonly<PivotChartOptions>
}

export function projectPivotChartDataset(
snapshot: PivotRuntimeSnapshot,
context: PivotChartProjectorContext,
options: PivotChartDataOptions = {},
): PivotChartDataset;

Projects one already-aggregated semantic child slice through the same matrix adapter as the root chart. The Pivot query owns hierarchy navigation; this adapter only maps its committed rows into renderer data.

export function projectPivotChartSemanticSlice(
snapshot: PivotRuntimeSnapshot,
slice: PivotSemanticSlice,
context: Omit<PivotChartProjectorContext, 'visibleRows'>,
options: PivotChartDataOptions = {},
): PivotChartDataset;

PIVOT_CHART_MODEL_VERSION: 2;

export type PivotChartTotalsMode = 'none' | 'grand' | 'subtotals' | 'all';

export type PivotChartTheme = 'auto' | string;

export type PivotChartUpdateReason =
| 'data'
| 'options'
| 'theme'
| 'relink'
| 'drill';

export type PivotChartLegendPosition = 'top' | 'right' | 'bottom' | 'left' | 'none';

export type PivotChartAxis = 'row' | 'column';

export type PivotChartDrillSyncMode = 'chart' | 'pivot' | 'both' | 'event';

interface PivotChartLimits {
maxCategories: number;
maxSeries: number;
maxDataPoints: number
}

DEFAULT_PIVOT_CHART_LIMITS: Readonly<PivotChartLimits>;

interface PivotChartMeasure {
prop: ColumnProp;
aggregator: string;
label: string
}

export type PivotChartMeasureSelection = Pick<
PivotChartMeasure,
'prop' | 'aggregator'
>;

export type PivotChartMemberKind =
| 'leaf'
| 'group'
| 'subtotal'
| 'grandTotal'
| 'collapsed';

interface PivotChartHierarchyLevel {
id: string;
field: ColumnProp;
label: string;
index: number
}

interface PivotChartHierarchyDefinition {
id: string;
axis: PivotChartAxis;
levels: PivotChartHierarchyLevel[]
}

interface PivotChartMemberHierarchy {
axis: PivotChartAxis;
hierarchyId: string;
levelId: string;
levelIndex: number;
maxLevelIndex: number;
hasChildren: boolean;
childCount?: number
}

interface PivotChartCategory {
id: string;
label: string;
path: PivotPath;
labels: string[];
depth: number;
kind: PivotChartMemberKind;
measure?: PivotChartMeasure;
/** Optional row-axis hierarchy metadata used by drill-aware datasets. */
hierarchy?: PivotChartMemberHierarchy
}

interface PivotChartSeries {
id: string;
label: string;
columnPath: PivotPath;
labels: string[];
kind: PivotChartMemberKind;
prop: ColumnProp;
/** Fixed measure for values-on-columns layouts; the category owns it for values-on-rows. */
measure?: PivotChartMeasure;
/** Optional column-axis hierarchy metadata used by drill-aware datasets. */
hierarchy?: PivotChartMemberHierarchy
}

interface PivotChartDataset {
revision: number;
source: 'client' | 'server';
categories: PivotChartCategory[];
series: PivotChartSeries[];
/** Row-major matrix: values[categoryIndex][seriesIndex]. */
values: Array<Array<number | null>>;
/** Optional row-major strings for labels and tooltips. */
displayValues?: Array<Array<string | null>>;
/** Ordered hierarchy definitions supplied by drill-aware data providers. */
hierarchies?: {
row?: PivotChartHierarchyDefinition;
column?: PivotChartHierarchyDefinition;
};
/**
* Canonical long-form analytical frame. The matrix above is a renderer view
* retained for efficient Cartesian drawing, while every semantic channel
* resolves against stable field IDs in this frame.
*/
analyticalFrame?: PivotChartAnalyticalFrame
}

export type PivotChartSemanticType =
| 'category'
| 'number'
| 'date'
| 'geographic'
| 'identifier';

interface PivotChartFieldDescriptor {
id: string;
label: string;
role: 'dimension' | 'measure';
semanticType: PivotChartSemanticType;
sourceField?: ColumnProp;
aggregator?: string;
format?: string
}

interface PivotChartDimensionValue {
value: string | number | boolean | null;
label: string;
path?: PivotPath;
labels?: string[]
}

interface PivotChartObservation {
id: string;
dimensions: Record<string, PivotChartDimensionValue>;
measures: Record<string, number | null>;
displayMeasures?: Record<string, string | null>
}

interface PivotChartDerivedViews {
bins?: PivotChartJsonValue[];
quantiles?: PivotChartJsonValue[];
ranges?: PivotChartJsonValue[];
flowEdges?: PivotChartJsonValue[];
financial?: PivotChartJsonValue[];
geographicFeatures?: PivotChartJsonValue[]
}

interface PivotChartAnalyticalFrame {
fields: PivotChartFieldDescriptor[];
observations: PivotChartObservation[];
hierarchies?: PivotChartDataset['hierarchies'];
derived?: PivotChartDerivedViews
}

interface PivotChartPresentation {
title?: string;
subtitle?: string;
legendPosition?: PivotChartLegendPosition;
dataLabels?: boolean;
xAxisTitle?: string;
yAxisTitle?: string
}

interface PivotChartDataOptions {
chartType?: PivotChartType;
seriesIds?: string[];
/** Measure carried by categories when Pivot values are placed on rows. */
categoryMeasure?: PivotChartMeasureSelection;
totals?: PivotChartTotalsMode;
limits?: Partial<PivotChartLimits>;
bindings?: PivotChartBindings
}

interface PivotChartDataScope {
rowPath: PivotPath;
columnPath?: PivotPath
}

PivotChartDataQueryOptions (Extended from index.ts)

Section titled “PivotChartDataQueryOptions (Extended from index.ts)”
interface PivotChartDataQueryOptions {
/** Optional committed semantic scope used for an initial or explicit slice. */
scope?: PivotChartDataScope
}

interface PivotChartInitialScope {
/** Parent row member whose immediate children form the initial categories. */
rowPath: PivotPath;
/** Display labels aligned one-to-one with `rowPath` for breadcrumbs. */
rowLabels: string[];
/** Parent column member whose immediate children form the initial series. */
columnPath?: PivotPath;
/** Display labels aligned one-to-one with `columnPath` for breadcrumbs. */
columnLabels?: string[]
}

PivotChartCreateParams (Extended from index.ts)

Section titled “PivotChartCreateParams (Extended from index.ts)”
interface PivotChartCreateParams {
container: HTMLElement;
linked?: boolean;
/** Creation-only semantic scope, persisted as the chart's drill state. */
initialScope?: PivotChartInitialScope;
presentation?: PivotChartPresentation;
theme?: PivotChartTheme;
chartOptions?: PivotChartOptions;
/** Controls whether drill navigation is local, Pivot-owned, synchronized, or application-owned. */
drillSyncMode?: PivotChartDrillSyncMode
}

PivotChartUpdatePatch (Extended from index.ts)

Section titled “PivotChartUpdatePatch (Extended from index.ts)”
interface PivotChartUpdatePatch {
linked?: boolean;
presentation?: Partial<PivotChartPresentation>;
theme?: PivotChartTheme;
chartOptions?: PivotChartOptions;
drillSyncMode?: PivotChartDrillSyncMode
}

export type PivotChartJsonValue =
| null
| boolean
| number
| string
| PivotChartJsonValue[]
| { [key: string]: PivotChartJsonValue };

export type PivotChartBindingChannel =
| 'category'
| 'geographic'
| 'series'
| 'value'
| 'x'
| 'y'
| 'size'
| 'color'
| 'shape'
| 'angle'
| 'radius'
| 'hierarchy'
| 'parent'
| 'child'
| 'weight'
| 'source'
| 'target'
| 'start'
| 'end'
| 'low'
| 'high'
| 'open'
| 'close'
| 'volume'
| 'actual'
| 'target'
| 'variance'
| 'facetRow'
| 'facetColumn'
| 'label'
| 'tooltip';

Stable analytical field IDs assigned to semantic renderer channels. Empty and omitted channels are equivalent.

/**
* Stable analytical field IDs assigned to semantic renderer channels.
* Empty and omitted channels are equivalent.
*/
export type PivotChartBindings = Partial<
Record<PivotChartBindingChannel, string[]>
>;

export type PivotChartOptions = Record<string, PivotChartJsonValue>;

interface PivotChartDrillAxisState {
path: PivotPath;
/** Selected hierarchy level, or `-1` at the hierarchy root. */
levelIndex: number
}

interface PivotChartDrillScope {
row: PivotChartDrillAxisState;
column: PivotChartDrillAxisState
}

PivotChartDrillFrame (Extended from index.ts)

Section titled “PivotChartDrillFrame (Extended from index.ts)”
interface PivotChartDrillFrame {
rowLabels: string[];
columnLabels: string[]
}

interface PivotChartDrillState {
active: PivotChartDrillScope;
/** Ordered root-to-current breadcrumb frames. */
frames: PivotChartDrillFrame[];
/** Dataset revision that produced the active frame; null until rebound. */
revision: number | null
}

interface PivotChartModel {
version: typeof PIVOT_CHART_MODEL_VERSION;
chartId: string;
chartType: PivotChartType;
linked: boolean;
totals: PivotChartTotalsMode;
seriesIds?: string[];
categoryMeasure?: PivotChartMeasureSelection;
presentation: PivotChartPresentation;
theme: PivotChartTheme;
/** Captured only for an unlinked chart. */
dataset?: PivotChartDataset;
bindings: PivotChartBindings;
chartOptions: PivotChartOptions;
drill: PivotChartDrillState;
drillSyncMode: PivotChartDrillSyncMode
}

interface PivotChartRestoreOptions {
container: HTMLElement;
chartId?: string
}

export type PivotChartDownloadFormat = 'png' | 'pdf';

interface PivotChartDownloadOptions {
fileName?: string;
width?: number;
height?: number;
fileFormat?: PivotChartDownloadFormat
}

interface PivotChartImageOptions {
width?: number;
height?: number;
fileFormat?: 'png'
}

interface PivotChartNodeClick {
category: PivotChartCategory;
series: PivotChartSeries;
value: number | null;
/** Bound relationship-channel values for scatter/bubble points. */
channelValues?: Partial<Record<'x' | 'y' | 'size', number>>;
/** Series descriptors that own relationship-channel values. */
channelSeries?: Partial<Record<'x' | 'y' | 'size', PivotChartSeries>>;
originalEvent?: Event
}

export type PivotChartTooltipChannel = 'x' | 'y' | 'size';

interface PivotChartTooltipContext {
chartId: string;
chartType: PivotChartType;
category: PivotChartCategory;
series: PivotChartSeries;
value: number | null;
displayValue: string;
color: string;
drillable: boolean;
channelValues?: Partial<Record<PivotChartTooltipChannel, number>>;
channelSeries?: Partial<
Record<PivotChartTooltipChannel, PivotChartSeries>
>;
channelDisplayValues?: Partial<
Record<PivotChartTooltipChannel, string>
>
}

interface PivotChartTooltipRow {
label: string;
value: string;
color?: string
}

interface PivotChartTooltipContent {
title?: string;
rows?: readonly PivotChartTooltipRow[];
footer?: string;
ariaLabel?: string
}

export type PivotChartTooltipResult =
| PivotChartTooltipContent
| string
| HTMLElement
| null
| undefined;

export type PivotChartTooltipFormatter = (
context: PivotChartTooltipContext,
defaultContent: PivotChartTooltipContent,
) => PivotChartTooltipResult;

interface PivotChartRenderInput {
chartId: string;
container: HTMLElement;
chartType: PivotChartType;
dataset: PivotChartDataset;
bindings: PivotChartBindings;
presentation: PivotChartPresentation;
/** Validated chart-specific overrides; omitted keys use catalog defaults. */
chartOptions?: PivotChartOptions;
theme: PivotChartTheme;
localeText: PivotChartsLocaleText;
/** Preview mode renders decorative, non-interactive compact chart marks. */
renderMode?: 'chart' | 'preview';
onNodeClick: (detail: PivotChartNodeClick) => void
}

interface PivotChartRendererCapabilities {
supportedTypes: readonly PivotChartType[];
download?: boolean;
downloadFormats?: readonly PivotChartDownloadFormat[];
imageDataUrl?: boolean
}

interface PivotChartRenderer {
readonly capabilities: PivotChartRendererCapabilities;
create(
input: PivotChartRenderInput,
): PivotChartRendererInstance | Promise<PivotChartRendererInstance>
}

interface PivotChartRendererInstance {
update(input: PivotChartRenderInput): void | Promise<void>;
destroy(): void;
focus?(): void;
download?(options?: PivotChartDownloadOptions): Promise<void>;
getImageDataURL?(options?: PivotChartImageOptions): Promise<string>
}

interface PivotChartDataRequest {
requestId: string;
viewId: string;
fieldsVersion: string;
loadOptions: PivotLoadOptions;
uiState?: PivotUiStateHints;
axisState: {
rowExpandedPaths?: PivotPath[];
columnExpandedPaths?: PivotPath[];
};
chart: {
seriesIds?: string[];
categoryMeasure?: PivotChartMeasureSelection;
totals: PivotChartTotalsMode;
limits: PivotChartLimits;
bindings: PivotChartBindings;
scope: PivotChartSemanticScope;
}
}

interface PivotChartSemanticScope {
/** Committed Pivot revision the provider must echo in its response. */
revision: number;
/** Active parent row member. The response contains its immediate children. */
rowPath: PivotPath;
/** Active parent column member. Reserved for column-axis drill navigation. */
columnPath: PivotPath;
/** Absolute immediate-child row depth requested for this frame. */
rowDepth: number;
/** Absolute immediate-child column depth requested for this frame. */
columnDepth: number
}

interface PivotChartDataResponse {
requestId: string;
scope: PivotChartSemanticScope;
categories: PivotChartCategory[];
series: PivotChartSeries[];
values: Array<Array<number | null>>;
displayValues?: Array<Array<string | null>>;
hierarchies: {
row?: PivotChartHierarchyDefinition;
column?: PivotChartHierarchyDefinition;
};
totalCategoryCount: number;
totalSeriesCount: number
}

interface PivotChartDataProvider {
load(
request: PivotChartDataRequest,
context: { signal: AbortSignal },
): Promise<PivotChartDataResponse>
}

interface PivotChartsConfig {
renderer?: PivotChartRenderer;
dataProvider?: PivotChartDataProvider;
defaultChartType?: PivotChartType;
defaultTotals?: PivotChartTotalsMode;
limits?: Partial<PivotChartLimits>;
localeText?: PivotChartsLocaleTextOptions;
defaultDrillSyncMode?: PivotChartDrillSyncMode;
/**
* Optional application adapter for Pivot synchronization. When omitted,
* the active Pivot plugin applies the semantic frontier directly.
*/
synchronizeDrill?: (
detail: PivotChartDrillSyncEventDetail,
context: { signal: AbortSignal },
) => void | Promise<void>
}

interface PivotChartsUiConfig {
contextMenu?: boolean;
dialogParent?: HTMLElement
}

interface PivotChartRef {
readonly id: string;
readonly container: HTMLElement;
readonly model: PivotChartModel;
update(patch: PivotChartUpdatePatch): Promise<void>;
canDrillDown(target: PivotChartDrillTarget | PivotChartCategory): boolean;
drillDown(target: PivotChartDrillTarget | PivotChartCategory): Promise<void>;
drillUp(): Promise<void>;
drillTo(frameIndex: number): Promise<void>;
resetDrill(): Promise<void>;
retryDrill(): Promise<void>;
getDrillState(): PivotChartDrillState;
focus(): void;
destroy(): void
}

export type PivotChartDrillTarget =
| { axis: 'row'; category: PivotChartCategory }
| { axis: 'column'; series: PivotChartSeries }
| {
axis: 'both';
category: PivotChartCategory;
series: PivotChartSeries;
};

export type PivotChartDrillAction = 'down' | 'up' | 'to' | 'reset' | 'retry';

interface PivotChartDrillEventDetail {
chartId: string;
action: PivotChartDrillAction;
from: PivotChartDrillState;
to: PivotChartDrillState
}

PivotChartDrilledEventDetail (Extended from index.ts)

Section titled “PivotChartDrilledEventDetail (Extended from index.ts)”
interface PivotChartDrilledEventDetail {
model: PivotChartModel;
dataset: PivotChartDataset
}

PivotChartDrillErrorEventDetail (Extended from index.ts)

Section titled “PivotChartDrillErrorEventDetail (Extended from index.ts)”
interface PivotChartDrillErrorEventDetail {
error: Error
}

PivotChartDrillSyncEventDetail (Extended from index.ts)

Section titled “PivotChartDrillSyncEventDetail (Extended from index.ts)”
interface PivotChartDrillSyncEventDetail {
mode: Exclude<PivotChartDrillSyncMode, 'chart'>
}

interface PivotChartCreatedEventDetail {
chartId: string;
ref: PivotChartRef
}

interface PivotChartUpdatedEventDetail {
chartId: string;
reason: PivotChartUpdateReason;
model: PivotChartModel
}

interface PivotChartDestroyedEventDetail {
chartId: string
}

PivotChartNodeClickEventDetail (Extended from index.ts)

Section titled “PivotChartNodeClickEventDetail (Extended from index.ts)”
interface PivotChartNodeClickEventDetail {
chartId: string;
categoryPath: PivotPath;
columnPath: PivotPath;
measure?: ColumnProp;
aggregator?: string
}

interface PivotChartErrorEventDetail {
chartId?: string;
error: Error
}

interface PivotChartProjectorContext {
/** Visible logical body rows after grouping, filtering, and sorting. */
visibleRows: DataType[];
/** Grid column types used to preserve measure display formatting. */
columnTypes?: ColumnTypes;
localeText?: PivotChartsLocaleText
}

export function isPivotChartType(value: unknown): value is PivotChartType;

export function resolvePivotChartLimits(
limits?: Partial<PivotChartLimits>,
): PivotChartLimits;

export function assertPivotChartLimits(
dataset: Pick<PivotChartDataset, 'categories' | 'series'>,
limits: PivotChartLimits,
);

export function selectPivotChartSeries(
series: PivotChartSeries[],
seriesIds?: readonly string[],
);

export function assertPivotChartTypeShape(
chartType: PivotChartType,
dataset: PivotChartDataset,
localeText?: PivotChartsLocaleText,
bindings: PivotChartBindings = {},
);

export function assertRelationshipChartBindings(
chartType: PivotChartType,
dataset: PivotChartDataset,
bindings: PivotChartBindings,
localeText?: PivotChartsLocaleText,
);

export function validatePivotChartDataResponse(
response: PivotChartDataResponse,
request: PivotChartDataRequest,
limits: PivotChartLimits,
): PivotChartDataset;

export function assertPivotChartDataset(dataset: PivotChartDataset);

export function validatePivotChartModel(model: unknown): PivotChartModel;

Creates an opt-in geographic capability. Merely importing Pivot Charts does not install geographic types or load projection/map data.

export function createPivotChartGeographicCapabilityPack(
provider: PivotChartGeographicProvider,
): PivotChartGeographicCapabilityPack;

export function getAvailablePivotChartGeographicTypes(
pack?: PivotChartGeographicCapabilityPack,
): readonly PivotChartGeographicType[];

Catalog-extension hook used by gallery hosts. The base catalog remains unchanged; a host receives no geographic entries until a pack is installed.

export function getPivotChartGeographicDefinitions(
pack?: PivotChartGeographicCapabilityPack,
): readonly PivotChartGeographicDefinition[];

export function isPivotChartGeographicType(
value: unknown,
): value is PivotChartGeographicType;

export function assertGeographicRequest(
request: PivotChartGeographicRequest,
): void;

export function assertGeographicData(
data: PivotChartGeographicData,
request: Pick<PivotChartGeographicRequest, 'chartType' | 'dataset'>,
): void;

PIVOT_CHART_GEOGRAPHIC_DEFINITIONS: readonly PivotChartGeographicDefinition[];

class PivotChartGeographicDataError {}

Geographic charts are intentionally not part of the base chart catalog. Import and install a geographic capability pack to make these types available.

/**
* Geographic charts are intentionally not part of the base chart catalog.
* Import and install a geographic capability pack to make these types
* available.
*/
export type PivotChartGeographicType =
| 'choropleth'
| 'proportionalSymbolMap'
| 'geographicHeatmap';

export type PivotChartGeographicPosition = readonly [
longitude: number,
latitude: number,
];

interface PivotChartGeographicViewport {
width: number;
height: number;
pixelRatio?: number
}

interface PivotChartGeographicRequest {
chartId: string;
chartType: PivotChartGeographicType;
dataset: PivotChartDataset;
bindings: PivotChartBindings;
theme: PivotChartTheme;
viewport: PivotChartGeographicViewport
}

interface PivotChartGeographicRegion {
id: string;
label: string;
/**
* Provider-projected SVG path. Projection and map assets remain owned by the
* provider, keeping them out of the Pivot bundle.
*/
path: string;
categoryId: string;
seriesId: string;
value: number | null;
properties?: Record<string, PivotChartJsonValue>
}

interface PivotChartGeographicSymbol {
id: string;
label: string;
position: PivotChartGeographicPosition;
/** Provider-projected viewport coordinate used by the optional renderer. */
projectedPosition: readonly [x: number, y: number];
categoryId: string;
seriesId: string;
value: number | null;
size: number | null;
properties?: Record<string, PivotChartJsonValue>
}

interface PivotChartGeographicHeatPoint {
id: string;
position: PivotChartGeographicPosition;
/** Provider-projected viewport coordinate used by the optional renderer. */
projectedPosition: readonly [x: number, y: number];
categoryId?: string;
seriesId?: string;
value: number;
radius?: number;
properties?: Record<string, PivotChartJsonValue>
}

PivotChartChoroplethData (Extended from index.ts)

Section titled “PivotChartChoroplethData (Extended from index.ts)”
interface PivotChartChoroplethData {
chartType: 'choropleth';
regions: PivotChartGeographicRegion[]
}

PivotChartProportionalSymbolData (Extended from index.ts)

Section titled “PivotChartProportionalSymbolData (Extended from index.ts)”
interface PivotChartProportionalSymbolData {
chartType: 'proportionalSymbolMap';
symbols: PivotChartGeographicSymbol[]
}

PivotChartGeographicHeatmapData (Extended from index.ts)

Section titled “PivotChartGeographicHeatmapData (Extended from index.ts)”
interface PivotChartGeographicHeatmapData {
chartType: 'geographicHeatmap';
points: PivotChartGeographicHeatPoint[]
}

export type PivotChartGeographicData =
| PivotChartChoroplethData
| PivotChartProportionalSymbolData
| PivotChartGeographicHeatmapData;

interface PivotChartGeographicProvider {
readonly id: string;
readonly supportedTypes: readonly PivotChartGeographicType[];
/**
* Loads map data and applies the provider-owned projection. The operation
* must observe the supplied signal and avoid mutating the request.
*/
load(
request: Readonly<PivotChartGeographicRequest>,
context: { signal: AbortSignal },
): Promise<PivotChartGeographicData>
}

interface PivotChartGeographicDefinition {
type: PivotChartGeographicType;
family: 'geographic';
localization: {
labelKey: PivotChartGeographicType;
descriptionKey: PivotChartGeographicType;
};
channels: readonly {
channel: 'geographic' | 'value' | 'size';
min: number;
max?: number;
}[];
documentationSlug: string
}

interface PivotChartGeographicCapabilityPack {
readonly id: string;
readonly provider: PivotChartGeographicProvider;
readonly definitions: readonly PivotChartGeographicDefinition[];
readonly supportedTypes: readonly PivotChartGeographicType[];
load(
request: PivotChartGeographicRequest,
context: { signal: AbortSignal },
): Promise<PivotChartGeographicData>;
/**
* Starts an asset-free SVG render lifecycle backed by this pack's provider.
* Provider loads are cancelled when superseded or destroyed.
*/
render(
input: PivotChartGeographicRenderInput,
): PivotChartGeographicRendererInstance
}

interface PivotChartGeographicLocaleText {
chartAriaLabel(type: PivotChartGeographicType): string;
loading: string;
loadError(error: Error): string;
regionAriaLabel(label: string, value: string): string;
symbolAriaLabel(label: string, value: string, size: string): string;
heatPointAriaLabel(value: string): string;
formatValue(value: number | null): string
}

export type PivotChartGeographicDatum =
| PivotChartGeographicRegion
| PivotChartGeographicSymbol
| PivotChartGeographicHeatPoint;

interface PivotChartGeographicRenderInput {
container: HTMLElement;
request: PivotChartGeographicRequest;
localeText: PivotChartGeographicLocaleText;
onNodeClick?: (
detail: {
chartType: PivotChartGeographicType;
datum: PivotChartGeographicDatum;
originalEvent: Event;
},
) => void;
onError?: (error: Error) => void
}

interface PivotChartGeographicRendererInstance {
readonly ready: Promise<void>;
update(input: PivotChartGeographicRenderInput): Promise<void>;
focus(): void;
destroy(): void
}

Headless Pivot plugin for creating and managing charts from the active Pivot result.

The plugin owns chart data projection, renderer lifecycle, linked refreshes, semantic drill-down, persistence, and export. It does not create the chart dialog; add PivotChartsUiPlugin when the standard modeless chart UI and Pivot context-menu action are required.

Configure the renderer through grid.pivotCharts before creating a chart. Public methods can be called on the installed plugin instance returned by grid.getPlugins(). A PivotChartRef offers the same common lifecycle operations scoped to one chart.

PivotPlugin is required. Linked charts read committed Pivot snapshots and refresh after Pivot data, filter, sorting, grouping, source, and grid-theme changes. Unlinked charts retain a serializable dataset in their model and do not follow later Pivot changes.

Example: Create a linked chart with the built-in renderer.

import {
PivotChartsPlugin,
PivotPlugin,
createPivotChartsRenderer,
mountPivotChart,
} from '@revolist/pivot';
const grid = document.querySelector('revo-grid')!;
grid.plugins = [PivotPlugin, PivotChartsPlugin];
grid.pivotCharts = {
renderer: createPivotChartsRenderer(),
defaultChartType: 'groupedColumn',
};
const chart = await mountPivotChart(grid, {
container: document.querySelector<HTMLElement>('#sales-chart')!,
presentation: { title: 'Sales by region' },
});
await chart.update({ chartType: 'stackedColumn' });
  • Required PivotPlugin: Consumes committed Pivot runtime snapshots and semantic result metadata.
  • Event integration PIVOT_MODEL_CHANGED_EVENT, afterfilterapply, aftersortingapply, groupexpandclick, aftersourceset, afterthemechanged: Keeps linked charts synchronized with the logical Pivot view.
  • Config integration grid.pivotCharts: Reads the renderer, complete-data provider, defaults, and safety limits.
class PivotChartsPlugin {
/**
* Projects the current committed Pivot result into a renderer-neutral chart
* dataset.
*
* Use this method for custom chart pickers, data previews, compatibility
* checks, or application renderers. The returned dataset is an immutable
* cached snapshot; request a new dataset after the Pivot revision changes.
* `scope` selects a semantic row/column parent and returns its immediate
* children, which is useful for opening a chart around a Pivot cell.
*
* @param options - Series, totals, bindings, limits, chart compatibility, and
* optional semantic scope for the projection.
* @returns A validated chart dataset for the active Pivot revision.
* @throws {@link PivotChartError} When Pivot data is unavailable, a provider
* response is invalid, safety limits are exceeded, or `chartType` is
* incompatible with the projected fields.
*
* @example Read a scoped dataset before presenting chart choices.
* ```ts
* const dataset = await charts.getChartData({
* chartType: 'groupedColumn',
* totals: 'none',
* scope: {
* rowPath: ['Canada'],
* columnPath: [2024],
* },
* });
*
* console.log(dataset.categories, dataset.series, dataset.values);
* ```
*/
async getChartData(
options: PivotChartDataQueryOptions = {},
): Promise<PivotChartDataset>;
/**
* Creates a chart in an application-owned container.
*
* By default the chart is linked to the active Pivot, excludes totals, and
* uses the configured default chart type. Set `linked: false` to capture the
* initial projected dataset as a standalone chart that ignores later Pivot
* changes. Use `initialScope` to start at a semantic hierarchy level while
* preserving breadcrumb and drill state.
*
* @param params - Container, chart type, data selection, presentation,
* bindings, theme, drill mode, and chart-specific options.
* @returns A chart reference for updates, drill navigation, focus, and
* destruction.
* @throws {TypeError} When `params.container` is not an `HTMLElement`.
* @throws {@link PivotChartError} When no renderer is configured, the chart
* type is unsupported, the data is incompatible, or the requested chart ID
* conflicts with an active or pending chart.
*
* @example Create a linked chart at a row hierarchy scope.
* ```ts
* const chart = await charts.createChart({
* container: document.querySelector<HTMLElement>('#chart')!,
* chartType: 'line',
* initialScope: {
* rowPath: ['Europe'],
* rowLabels: ['Europe'],
* },
* presentation: {
* title: 'European performance',
* legendPosition: 'bottom',
* },
* });
* ```
*/
async createChart(params: PivotChartCreateParams): Promise<PivotChartRef>;
/**
* Applies a validated partial update to an existing chart.
*
* Renderer updates are serialized so overlapping calls cannot overwrite one
* another. Changes to totals, series, bindings, or linked state reload chart
* data; presentation, theme, and chart options update the existing renderer
* instance when possible.
*
* @param chartId - ID returned by {@link createChart} or {@link restoreChart}.
* @param patch - Chart type, data selection, presentation, theme, bindings,
* drill mode, or chart-specific options to change.
* @returns A promise that resolves after the renderer and stored model agree.
* @throws {@link PivotChartError} When the chart does not exist, the patch is
* invalid, relinking fails, or the resulting data is incompatible.
*
* @example Change the visualization without recreating its container.
* ```ts
* await charts.updateChart(chart.id, {
* chartType: 'stackedBar',
* presentation: {
* title: 'Sales contribution',
* dataLabels: true,
* },
* });
* ```
*/
async updateChart(
chartId: string,
patch: PivotChartUpdatePatch,
): Promise<void>;
/**
* Retries the current chart data/render operation without changing options.
* UI integrations use this after a transient provider or renderer failure.
*
* @param chartId - ID of the chart to reload.
* @returns A promise that resolves after data and rendering are current.
* @throws {@link PivotChartError} When the chart does not exist or the retry
* fails. Aborted superseded refreshes resolve without changing the chart.
*
* @example Retry after showing an application-level error state.
* ```ts
* try {
* await charts.refreshChart(chart.id);
* } catch (error) {
* console.error('Chart refresh failed', error);
* }
* ```
*/
async refreshChart(chartId: string): Promise<void>;
/**
* Reports whether a category or explicit semantic target can navigate to a
* deeper hierarchy level in the current chart frame.
*
* The result is `false` for unlinked charts, non-drillable chart types,
* targets outside the current dataset, and leaf members.
*
* @param chartId - ID of the chart to inspect.
* @param input - A category for row drill-down or an explicit row, column, or
* two-axis drill target.
* @returns `true` when {@link drillDownChart} can navigate the target.
* @throws {@link PivotChartError} When the chart does not exist.
*
* @example Enable a custom drill action only for expandable marks.
* ```ts
* const category = dataset.categories[0];
* if (category && charts.canDrillDown(chart.id, category)) {
* await charts.drillDownChart(chart.id, category);
* }
* ```
*/
canDrillDown(
chartId: string,
input: PivotChartDrillTarget | PivotChartCategory,
): boolean;
/**
* Navigates a linked chart into the children of a row, column, or combined
* hierarchy target.
*
* Drill behavior follows the chart's `drillSyncMode`: chart-local, Pivot-only,
* synchronized chart and Pivot, or application-event mode. The operation is
* cancellable through `pivot-chart-before-drill`.
*
* @param chartId - ID of the chart to navigate.
* @param input - Category or explicit semantic target selected by the user.
* @returns A promise that resolves after synchronization, data loading, and
* rendering complete.
* @throws {@link PivotChartError} When the chart is missing, the target is not
* drillable, synchronization is unavailable, or scoped data loading fails.
*
* @example Drill both chart axes from a relationship-chart point.
* ```ts
* await charts.drillDownChart(chart.id, {
* axis: 'both',
* category: selectedCategory,
* series: selectedSeries,
* });
* ```
*/
async drillDownChart(
chartId: string,
input: PivotChartDrillTarget | PivotChartCategory,
): Promise<void>;
/**
* Navigates a chart to the parent of its current drill frame.
*
* Calling this method at the root is a no-op and cancels pending drill work.
*
* @param chartId - ID of the chart to navigate.
* @returns A promise that resolves after the parent frame is rendered.
* @throws {@link PivotChartError} When the chart does not exist or parent
* synchronization/data loading fails.
*
* @example
* ```ts
* await charts.drillUpChart(chart.id);
* ```
*/
async drillUpChart(chartId: string): Promise<void>;
/**
* Navigates directly to an existing breadcrumb frame.
*
* Frame indexes use the root-to-current order returned by
* `chart.getDrillState().frames`; index `0` is the root. Selecting the current
* frame is a no-op.
*
* @param chartId - ID of the chart to navigate.
* @param frameIndex - Zero-based breadcrumb frame index.
* @returns A promise that resolves after the selected frame is rendered.
* @throws {@link PivotChartError} When the chart is missing, the frame index
* is invalid, or synchronization/data loading fails.
*
* @example Return to the first drilled level.
* ```ts
* await charts.drillToChart(chart.id, 1);
* ```
*/
async drillToChart(chartId: string, frameIndex: number): Promise<void>;
/**
* Returns a drilled chart to its root semantic scope.
*
* Calling this method at the root is a no-op and cancels pending drill work.
*
* @param chartId - ID of the chart to reset.
* @returns A promise that resolves after the root frame is rendered.
* @throws {@link PivotChartError} When the chart does not exist or reset
* synchronization/data loading fails.
*
* @example
* ```ts
* await charts.resetChartDrill(chart.id);
* ```
*/
async resetChartDrill(chartId: string): Promise<void>;
/**
* Retries the last failed drill operation for a chart.
*
* If no failed drill state exists, this method falls back to
* {@link refreshChart} without changing the current frame.
*
* @param chartId - ID of the chart whose drill should be retried.
* @returns A promise that resolves after retry or refresh completes.
* @throws {@link PivotChartError} When the chart does not exist or the retry
* fails again.
*
* @example
* ```ts
* grid.addEventListener('pivot-chart-drill-error', async event => {
* await charts.retryChartDrill(event.detail.chartId);
* });
* ```
*/
async retryChartDrill(chartId: string): Promise<void>;
/**
* Destroys one chart and releases its renderer and pending drill resources.
*
* Unknown chart IDs are ignored. The chart's application-owned container is
* not removed.
*
* @param chartId - ID of the chart to destroy.
*
* @example
* ```ts
* charts.destroyChart(chart.id);
* ```
*/
destroyChart(chartId: string): void;
/**
* Destroys every chart owned by this plugin instance.
*
* Pending creations are invalidated before and after destruction so
* re-entrant lifecycle handlers cannot leave an untracked chart behind.
*
* @example
* ```ts
* charts.destroyAllCharts();
* ```
*/
destroyAllCharts(): void;
/**
* Returns defensive copies of all active chart models.
*
* Persist these models to restore linked chart configuration or complete
* unlinked chart snapshots later. Mutating the returned objects does not
* change active charts.
*
* @returns Serializable chart models in creation order.
*
* @example Save chart state.
* ```ts
* localStorage.setItem(
* 'pivot-charts',
* JSON.stringify(charts.getChartModels()),
* );
* ```
*/
getChartModels(): PivotChartModel[];
/**
* Restores a validated chart model into a new container.
*
* Linked models reload the current Pivot data and retain the deepest valid
* drill ancestor. Unlinked models render their captured dataset. Pass
* `options.chartId` to override the persisted ID when restoring multiple
* copies of the same model.
*
* @param model - Previously persisted chart model.
* @param options - Destination container and optional replacement chart ID.
* @returns A new chart reference managed by this plugin.
* @throws {@link PivotChartError} When the model is invalid, its chart ID is
* already active or pending, or current data cannot satisfy the model.
*
* @example Restore persisted charts into application containers.
* ```ts
* const [saved] = JSON.parse(
* localStorage.getItem('pivot-charts') ?? '[]',
* );
*
* if (saved) {
* await charts.restoreChart(saved, {
* container: document.querySelector<HTMLElement>('#restored-chart')!,
* });
* }
* ```
*/
async restoreChart(
model: PivotChartModel,
options: PivotChartRestoreOptions,
): Promise<PivotChartRef>;
/**
* Downloads a rendered chart through the configured renderer.
*
* The built-in renderer supports PNG and PDF. Custom renderers advertise
* their formats through `capabilities.downloadFormats`.
*
* @param chartId - ID of the chart to export.
* @param options - File name, dimensions, and output format.
* @returns A promise that resolves after the renderer starts or completes the
* download.
* @throws {@link PivotChartError} When the chart is missing or the renderer
* does not support downloads or the requested format.
*
* @example Export the current chart as PDF.
* ```ts
* await charts.downloadChart(chart.id, {
* fileName: 'quarterly-sales',
* fileFormat: 'pdf',
* width: 1600,
* height: 900,
* });
* ```
*/
async downloadChart(
chartId: string,
options?: PivotChartDownloadOptions,
): Promise<void>;
/**
* Encodes a chart as an image data URL without triggering a download.
*
* Use this for application previews, reports, clipboard workflows, or custom
* persistence. Renderer support is optional and declared by
* `capabilities.imageDataUrl`.
*
* @param chartId - ID of the chart to encode.
* @param options - Optional output width, height, and PNG format.
* @returns A PNG data URL generated by the renderer.
* @throws {@link PivotChartError} When the chart is missing or its renderer
* cannot create image data URLs.
*
* @example Show a chart image in an application-owned preview.
* ```ts
* const image = document.querySelector<HTMLImageElement>('#chart-preview')!;
* image.src = await charts.getChartImageDataURL(chart.id, {
* width: 1200,
* height: 675,
* });
* ```
*/
async getChartImageDataURL(
chartId: string,
options?: PivotChartImageOptions,
): Promise<string>;
}

export function createPivotChartsLocaleText(
localeText?: PivotChartsLocaleTextOptions,
): PivotChartsLocaleText;

interface PivotChartDatumLocaleContext {
category: PivotChartCategory;
series: PivotChartSeries;
value: number | null;
displayValue: string
}

interface PivotChartRelationshipDatumLocaleContext {
category: PivotChartCategory;
x: { series: PivotChartSeries; value: number; displayValue: string };
y: { series: PivotChartSeries; value: number; displayValue: string };
size?: { series: PivotChartSeries; value: number; displayValue: string }
}

interface PivotChartsLocaleText {
dialog: {
kicker: string;
untitledChart: string;
chartAriaLabel: (title: string | undefined) => string;
settingsAriaLabel: string;
};
actions: {
exportChart: string;
downloadPng: string;
downloadPdf: string;
close: string;
closeButtonText: string;
retry: string;
viewData: string;
viewChart: string;
};
status: {
loading: string;
empty: string;
formatError: (error: Error) => string;
};
drill: {
toolbarAriaLabel: string;
breadcrumbAriaLabel: string;
root: string;
currentLevel: (label: string) => string;
loading: (label: string) => string;
loaded: (label: string) => string;
retry: string;
formatError: (error: Error) => string;
drillableDatum: (context: PivotChartDatumLocaleContext) => string;
relationshipDrillableDatum:
(context: PivotChartRelationshipDatumLocaleContext) => string;
};
controls: {
chartType: string;
valueSeries: string;
xMeasure: string;
yMeasure: string;
sizeMeasure: string;
title: string;
subtitle: string;
legend: string;
dataLabels: string;
xAxisTitle: string;
yAxisTitle: string;
totals: string;
drillSyncMode: string;
theme: string;
keepLinked: string;
};
chartOptions: {
heading: string;
description: string;
resetAll: string;
resetOption: (label: string) => string;
valueLabel: (label: string, value: number) => string;
labels: Record<PivotChartOptionKey, string>;
descriptions: Record<PivotChartOptionKey, string>;
};
gallery: {
tabs: {
chart: string;
data: string;
customize: string;
};
searchPlaceholder: string;
searchAriaLabel: string;
recommended: string;
families: Record<PivotChartFamily, string>;
noResults: string;
compatibilityReason: (reason: PivotChartCompatibilityReason) => string;
};
chartTypes: Record<PivotChartType, string>;
chartDescriptions: Record<PivotChartType, string>;
legendPositions: {
automatic: string;
top: string;
right: string;
bottom: string;
left: string;
none: string;
};
totals: Record<PivotChartTotalsMode, string>;
drillSyncModes: Record<PivotChartDrillSyncMode, string>;
themes: {
auto: string;
default: string;
material: string;
compact: string;
darkMaterial: string;
darkCompact: string;
custom: (theme: string) => string;
};
contextMenu: {
createChart: string;
pluginRequired: string;
rendererRequired: string;
serverProviderRequired: string;
};
uiErrors: {
destroyed: string;
containerMissing: string;
mountContainerRequired: string;
creationClosed: string;
pluginRequired: string;
uiPluginRequired: string;
};
data: {
total: string;
hierarchySeparator: string;
};
dataTable: {
regionAriaLabel: string;
tableCaption: string;
categoryHeader: string;
emptyValue: string;
sortAscending: (columnLabel: string) => string;
sortDescending: (columnLabel: string) => string;
sortedAscending: (columnLabel: string) => string;
sortedDescending: (columnLabel: string) => string;
};
renderer: {
chartAriaLabel: (title: string | undefined) => string;
legendAriaLabel: string;
legendItemAriaLabel: (series: PivotChartSeries) => string;
legendCategoryItemAriaLabel: (category: PivotChartCategory) => string;
legendOverflow: (hiddenCount: number) => string;
datumAriaLabel: (context: PivotChartDatumLocaleContext) => string;
datumTitle: (context: PivotChartDatumLocaleContext) => string;
relationshipDatumAriaLabel:
(context: PivotChartRelationshipDatumLocaleContext) => string;
relationshipDatumTitle:
(context: PivotChartRelationshipDatumLocaleContext) => string;
tooltipDrillHint: string;
missingValue: string;
formatNumber: (value: number) => string;
formatPercent: (value: number) => string;
downloadFileName: string;
pngUnavailable: string;
pdfUnavailable: string;
pdfEncodeError: string;
rasterizeError: string;
canvasRequired: string;
destroyedRenderer: string;
unsupportedChartType: (chartType: string) => string;
valueSeriesRequired: (chartType: string) => string;
singleSeriesRequired: (chartType: string) => string;
rowHierarchyRequired: string;
dateCategoriesRequired: string;
distributionViewRequired: string;
nonNegativeValuesRequired: string;
relationshipBindingsRequired: (chartType: string) => string;
relationshipDataRequired: (chartType: string) => string;
nonNegativeSizeRequired: string;
minimumSeriesRequired: (chartType: string, minimum: number) => string;
maximumSeriesRequired: (chartType: string, maximum: number) => string;
}
}

interface PivotChartsLocaleTextOptions {
dialog?: Partial<PivotChartsLocaleText['dialog']>;
actions?: Partial<PivotChartsLocaleText['actions']>;
status?: Partial<PivotChartsLocaleText['status']>;
drill?: Partial<PivotChartsLocaleText['drill']>;
controls?: Partial<PivotChartsLocaleText['controls']>;
chartOptions?: {
heading?: string;
description?: string;
resetAll?: string;
resetOption?: PivotChartsLocaleText['chartOptions']['resetOption'];
valueLabel?: PivotChartsLocaleText['chartOptions']['valueLabel'];
labels?: Partial<PivotChartsLocaleText['chartOptions']['labels']>;
descriptions?: Partial<
PivotChartsLocaleText['chartOptions']['descriptions']
>;
};
gallery?: {
tabs?: Partial<PivotChartsLocaleText['gallery']['tabs']>;
searchPlaceholder?: string;
searchAriaLabel?: string;
recommended?: string;
families?: Partial<PivotChartsLocaleText['gallery']['families']>;
noResults?: string;
compatibilityReason?: PivotChartsLocaleText['gallery']['compatibilityReason'];
};
chartTypes?: Partial<PivotChartsLocaleText['chartTypes']>;
chartDescriptions?: Partial<PivotChartsLocaleText['chartDescriptions']>;
legendPositions?: Partial<PivotChartsLocaleText['legendPositions']>;
totals?: Partial<PivotChartsLocaleText['totals']>;
drillSyncModes?: Partial<PivotChartsLocaleText['drillSyncModes']>;
themes?: Partial<PivotChartsLocaleText['themes']>;
contextMenu?: Partial<PivotChartsLocaleText['contextMenu']>;
uiErrors?: Partial<PivotChartsLocaleText['uiErrors']>;
data?: Partial<PivotChartsLocaleText['data']>;
dataTable?: Partial<PivotChartsLocaleText['dataTable']>;
renderer?: Partial<PivotChartsLocaleText['renderer']>
}

DEFAULT_PIVOT_CHARTS_LOCALE_TEXT: {
dialog: { kicker: string; untitledChart: string; chartAriaLabel: (title: string | undefined) => string; settingsAriaLabel: string; };
actions: { exportChart: string; downloadPng: string; downloadPdf: string; close: string; closeButtonText: string; retry: string; viewData: string; viewChart: string; };
status: { loading: string; empty: string; formatError: (error: Error) => string; };
drill: { toolbarAriaLabel: string; breadcrumbAriaLabel: string; root: string; currentLevel: (label: string) => string; loading: (label: string) => string; loaded: (label: string) => string; retry: string; formatError: (error: Error) => string; drillableDatum: ({ category, series, displayValue }: PivotChartDatumLocaleContext) => string; relationshipDrillableDatum: ({ category, x, y, size }: PivotChartRelationshipDatumLocaleContext) => string; };
controls: { chartType: string; valueSeries: string; xMeasure: string; yMeasure: string; sizeMeasure: string; title: string; subtitle: string; legend: string; dataLabels: string; xAxisTitle: string; yAxisTitle: string; totals: string; drillSyncMode: string; theme: string; keepLinked: string; };
chartOptions: { heading: string; description: string; resetAll: string; resetOption: (label: string) => string; valueLabel: (label: string, value: number) => string; labels: { showGridLines: string; markOpacity: string; strokeWidth: string; fillOpacity: string; }; descriptions: { showGridLines: string; markOpacity: string; strokeWidth: string; fillOpacity: string; }; };
gallery: { tabs: { chart: string; data: string; customize: string; }; searchPlaceholder: string; searchAriaLabel: string; recommended: string; families: { column: string; bar: string; line: string; area: string; partToWhole: string; relationship: string; hierarchical: string; combination: string; statistical: string; specialized: string; kpi: string; polar: string; distribution: string; matrix: string; process: string; flow: string; financial: string; }; noResults: string; compatibilityReason: (reason: PivotChartCompatibilityReason) => string; };
chartTypes: { groupedColumn: string; stackedColumn: string; normalizedColumn: string; groupedBar: string; stackedBar: string; normalizedBar: string; line: string; smoothLine: string; steppedLine: string; area: string; steppedArea: string; stackedArea: string; normalizedArea: string; pie: string; donut: string; treemap: string; sunburst: string; scatter: string; bubble: string; columnLine: string; areaLine: string; rangeColumn: string; rangeBar: string; rangeArea: string; confidenceBand: string; errorInterval: string; waterfall: string; lollipop: string; bullet: string; semiDonut: string; rose: string; radarLine: string; radarArea: string; polarColumn: string; stackedPolarColumn: string; normalizedPolarColumn: string; radialBar: string; multiRingRadialBar: string; histogram: string; stripDot: string; heatmap: string; calendarHeatmap: string; densityScatter: string; icicle: string; circlePacking: string; funnel: string; pyramid: string; boxPlot: string; violin: string; rangeInterval: string; sankey: string; chord: string; candlestick: string; ohlc: string; volumePrice: string; gauge: string; kpi: string; progressGauge: string; connectedScatter: string; waffle: string; smallMultiples: string; annotatedTimeSeries: string; timelineRange: string; };
chartDescriptions: { groupedColumn: string; stackedColumn: string; normalizedColumn: string; groupedBar: string; stackedBar: string; normalizedBar: string; line: string; smoothLine: string; steppedLine: string; area: string; steppedArea: string; stackedArea: string; normalizedArea: string; pie: string; donut: string; treemap: string; sunburst: string; scatter: string; bubble: string; columnLine: string; areaLine: string; rangeColumn: string; rangeBar: string; rangeArea: string; confidenceBand: string; errorInterval: string; waterfall: string; lollipop: string; bullet: string; semiDonut: string; rose: string; radarLine: string; radarArea: string; polarColumn: string; stackedPolarColumn: string; normalizedPolarColumn: string; radialBar: string; multiRingRadialBar: string; histogram: string; stripDot: string; heatmap: string; calendarHeatmap: string; densityScatter: string; icicle: string; circlePacking: string; funnel: string; pyramid: string; boxPlot: string; violin: string; rangeInterval: string; sankey: string; chord: string; candlestick: string; ohlc: string; volumePrice: string; gauge: string; kpi: string; progressGauge: string; connectedScatter: string; waffle: string; smallMultiples: string; annotatedTimeSeries: string; timelineRange: string; };
legendPositions: { automatic: string; top: string; right: string; bottom: string; left: string; none: string; };
totals: { none: string; grand: string; subtotals: string; all: string; };
drillSyncModes: { chart: string; pivot: string; both: string; event: string; };
themes: { auto: string; default: string; material: string; compact: string; darkMaterial: string; darkCompact: string; custom: (theme: string) => string; };
contextMenu: { createChart: string; pluginRequired: string; rendererRequired: string; serverProviderRequired: string; };
uiErrors: { destroyed: string; containerMissing: string; mountContainerRequired: string; creationClosed: string; pluginRequired: string; uiPluginRequired: string; };
data: { total: string; hierarchySeparator: string; };
dataTable: { regionAriaLabel: string; tableCaption: string; categoryHeader: string; emptyValue: string; sortAscending: (columnLabel: string) => string; sortDescending: (columnLabel: string) => string; sortedAscending: (columnLabel: string) => string; sortedDescending: (columnLabel: string) => string; };
renderer: { chartAriaLabel: (title: string | undefined) => string; legendAriaLabel: string; legendItemAriaLabel: (series: PivotChartSeries) => string; legendCategoryItemAriaLabel: (category: PivotChartCategory) => string; legendOverflow: (hiddenCount: number) => string; datumAriaLabel: ({ category, series, displayValue }: PivotChartDatumLocaleContext) => string; datumTitle: ({ category, series, displayValue }: PivotChartDatumLocaleContext) => string; relationshipDatumAriaLabel: ({ category, x, y, size }: PivotChartRelationshipDatumLocaleContext) => string; relationshipDatumTitle: ({ category, x, y, size }: PivotChartRelationshipDatumLocaleContext) => string; tooltipDrillHint: string; missingValue: string; formatNumber: (value: number) => string; formatPercent: (value: number) => string; downloadFileName: string; pngUnavailable: string; pdfUnavailable: string; pdfEncodeError: string; rasterizeError: string; canvasRequired: string; destroyedRenderer: string; unsupportedChartType: (chartType: string) => string; valueSeriesRequired: (chartType: string) => string; singleSeriesRequired: (chartType: string) => string; rowHierarchyRequired: string; dateCategoriesRequired: string; distributionViewRequired: string; nonNegativeValuesRequired: string; relationshipBindingsRequired: (chartType: string) => string; relationshipDataRequired: (chartType: string) => string; nonNegativeSizeRequired: string; minimumSeriesRequired: (chartType: string, minimum: number) => string; maximumSeriesRequired: (chartType: string, maximum: number) => string; };
};

Creates the built-in RevoGrid Pivot Charts SVG renderer.

export function createPivotChartsRenderer(
options: PivotChartsRendererOptions = {},
): PivotChartRenderer;

interface ChartTheme {
background: string;
foreground: string;
muted: string;
grid: string
}

interface PivotChartLabelContext {
chartId: string;
chartType: PivotChartType;
kind: PivotChartLabelKind;
defaultText: string;
renderMode: 'chart' | 'preview';
axis?: 'x' | 'y';
category?: PivotChartCategory;
series?: PivotChartSeries;
categoryIndex?: number;
seriesIndex?: number;
value?: number | null;
formattedValue?: string
}

export type PivotChartLabelFormatter = (
context: PivotChartLabelContext,
) => string | PivotChartLabelResult | null | undefined;

export type PivotChartLabelKind =
| 'title'
| 'subtitle'
| 'axisTitle'
| 'axisTick'
| 'category'
| 'legend'
| 'data'
| 'annotation'
| 'summary'
| 'specialized';

interface PivotChartLabelResult {
text?: string;
ariaLabel?: string;
className?: string;
style?: PivotChartLabelStyle;
hidden?: boolean
}

interface PivotChartLabelsOptions {
/** Refines, replaces, or suppresses any visible SVG chart label. */
formatter?: PivotChartLabelFormatter;
/** Reusable typography overrides applied before formatter-specific styles. */
styles?: Partial<Record<PivotChartLabelKind, PivotChartLabelStyle>>
}

interface PivotChartLabelStyle {
fill?: string;
fontFamily?: string;
fontSize?: number | string;
fontWeight?: number | string;
fontStyle?: string;
letterSpacing?: number | string;
textDecoration?: string;
opacity?: number;
textAnchor?: 'start' | 'middle' | 'end'
}

export type PivotChartRendererTheme =
| Partial<ChartTheme>
| ((context: PivotChartRendererThemeContext) => Partial<ChartTheme>);

interface PivotChartRendererThemeContext {
input: PivotChartRenderInput;
theme: ChartTheme
}

interface PivotChartsRendererOptions {
/** Additional application class names applied to the chart SVG. */
className?: string;
palette?: readonly string[];
categorySeparator?: string;
fontFamily?: string;
/** Overrides the resolved light or dark chart theme. */
theme?: PivotChartRendererTheme;
/** Customizes all chart text through one semantic label pipeline. */
labels?: PivotChartLabelsOptions;
imageEncoder?: (
svg: SVGSVGElement,
options: Required<Pick<PivotChartImageOptions, 'width' | 'height'>>,
) => Promise<string>;
pdfEncoder?: (
svg: SVGSVGElement,
options: Required<Pick<PivotChartDownloadOptions, 'width' | 'height'>>,
) => Promise<string>;
/** Disable tooltips or customize the built-in semantic tooltip renderer. */
tooltip?: false | PivotChartTooltipOptions
}

export type PivotChartUiOpenParams = Omit<PivotChartCreateParams, 'container'>;

export type PivotChartUiMountParams = PivotChartCreateParams;

  • Required PivotChartsPlugin: Uses the headless Pivot Charts lifecycle and data APIs.
  • Optional ContextMenuPlugin: Contributes the optional Pivot Chart row-menu action.
  • Config integration grid.pivotChartsUi: Reads UI mounting and context-menu behavior from grid.pivotChartsUi.
class PivotChartsUiPlugin {
/**
* Opens a UI-owned modeless Pivot chart. The returned chart ref remains
* managed by the headless plugin; closing the dialog destroys that ref.
* If this grid already has an open chart dialog, it is focused and its
* existing chart ref is returned.
*/
async openChart(
params: PivotChartUiOpenParams = {},
): Promise<PivotChartRef>;
/**
* Mounts the standard Pivot Chart controls inside an application-owned
* container. Multiple embedded charts may coexist with the modeless dialog.
* Destroying the returned chart ref removes the embedded UI.
*/
async mountChart({
container,
...params
}: PivotChartUiMountParams): Promise<PivotChartRef>;
}

export function PivotChartDialog({
mode = 'dialog',
model,
series,
dataset,
renderer,
supportedTypes,
loading,
empty,
error,
drillLoading = false,
drillError,
drillPendingLabel,
drillCompletedLabel,
downloadFormats,
localeText,
onUpdate,
onRetry,
onDrillBack = () => {},
onDrillHome = () => {},
onDrillNavigate = () => {},
onDrillRetry = () => {},
onDownload,
onClose,
}: PivotChartDialogProps);

interface PivotChartDialogProps {
readonly mode?: 'dialog' | 'embedded';
readonly model: PivotChartModel;
readonly series: readonly PivotChartSeries[];
readonly dataset?: PivotChartDataset;
readonly renderer?: PivotChartRenderer;
readonly supportedTypes: readonly PivotChartType[];
readonly loading: boolean;
readonly empty: boolean;
readonly error?: Error;
readonly drillLoading?: boolean;
readonly drillError?: Error;
readonly drillPendingLabel?: string;
readonly drillCompletedLabel?: string;
readonly downloadFormats: readonly PivotChartDownloadFormat[];
readonly localeText: PivotChartsLocaleText;
readonly onUpdate: (patch: PivotChartUpdatePatch) => void;
readonly onRetry: () => void;
readonly onDrillBack?: () => void;
readonly onDrillHome?: () => void;
readonly onDrillNavigate?: (frameIndex: number) => void;
readonly onDrillRetry?: () => void;
readonly onDownload: (format: PivotChartDownloadFormat) => void;
readonly onClose?: () => void
}

chartRenderers: Record<"line" | "area" | "kpi" | "groupedColumn" | "stackedColumn" | "normalizedColumn" | "groupedBar" | "stackedBar" | "normalizedBar" | "smoothLine" | "steppedLine" | "steppedArea" | "stackedArea" | "normalizedArea" | "pie" | "donut" | "treemap" | "sunburst" | "scatter" | "bubble" | "densityScatter" | "connectedScatter" | "columnLine" | "areaLine" | "rangeColumn" | "rangeBar" | "rangeArea" | "confidenceBand" | "errorInterval" | "waterfall" | "lollipop" | "bullet" | "semiDonut" | "rose" | "radarLine" | "radarArea" | "polarColumn" | "stackedPolarColumn" | "normalizedPolarColumn" | "radialBar" | "multiRingRadialBar" | "histogram" | "stripDot" | "heatmap" | "calendarHeatmap" | "icicle" | "circlePacking" | "funnel" | "pyramid" | "boxPlot" | "violin" | "rangeInterval" | "sankey" | "chord" | "candlestick" | "ohlc" | "volumePrice" | "gauge" | "progressGauge" | "waffle" | "smallMultiples" | "annotatedTimeSeries" | "timelineRange", PivotChartRenderFunction>;

renderWaffle: PivotChartRenderFunction;

renderHistogram: PivotChartRenderFunction;

renderDotPlot: PivotChartRenderFunction;

renderStripDot: PivotChartRenderFunction;

renderStripPlot: PivotChartRenderFunction;

renderSmallMultiples: PivotChartRenderFunction;

renderCandlestick: PivotChartRenderFunction;

renderOhlc: PivotChartRenderFunction;

renderVolumePrice: PivotChartRenderFunction;

renderChord: PivotChartRenderFunction;

The current Pivot dataset is a category-by-series matrix rather than an explicit edge list. Until a provider supplies the normalized flow view, this deterministic projection treats those two matrix axes as adjacent graph partitions: each positive finite cell becomes one directed edge from its category to its series. Aggregate categories and unconnected nodes are omitted, while original matrix indexes are retained for exact interaction.

export function createFlowGraph(
dataset: PivotChartDataset,
bindings: PivotChartBindings,
): PivotChartFlowGraph;

interface PivotChartFlowEdge {
readonly id: string;
readonly sourceId: string;
readonly targetId: string;
readonly value: number;
readonly category: PivotChartCategory;
readonly categoryIndex: number;
readonly series: PivotChartSeries;
readonly seriesIndex: number
}

interface PivotChartFlowGraph {
readonly nodes: readonly PivotChartFlowNode[];
readonly edges: readonly PivotChartFlowEdge[];
readonly total: number
}

interface PivotChartFlowNode {
readonly id: string;
readonly label: string;
readonly kind: 'category' | 'series';
readonly value: number;
readonly category?: PivotChartCategory;
readonly categoryIndex?: number;
readonly series?: PivotChartSeries;
readonly seriesIndex?: number
}

renderSankey: PivotChartRenderFunction;

renderCirclePacking: PivotChartRenderFunction;

renderIcicle: PivotChartRenderFunction;

export function renderSunburst(context: RenderContext);

export function renderTreemap(context: RenderContext);

renderGauge: PivotChartRenderFunction;

renderKpi: PivotChartRenderFunction;

renderProgressGauge: PivotChartRenderFunction;

renderCalendarHeatmap: PivotChartRenderFunction;

renderHeatmap: PivotChartRenderFunction;

renderMultiRingRadialBar: PivotChartRenderFunction;

renderNormalizedPolarColumn: PivotChartRenderFunction;

renderPolarColumn: PivotChartRenderFunction;

renderRadarArea: PivotChartRenderFunction;

renderRadarLine: PivotChartRenderFunction;

renderRadialBar: PivotChartRenderFunction;

renderRose: PivotChartRenderFunction;

renderStackedPolarColumn: PivotChartRenderFunction;

renderFunnel: PivotChartRenderFunction;

renderPyramid: PivotChartRenderFunction;

renderBullet: PivotChartRenderFunction;

renderConfidenceBand: PivotChartRenderFunction;

renderErrorInterval: PivotChartRenderFunction;

renderLollipop: PivotChartRenderFunction;

renderRangeArea: PivotChartRenderFunction;

renderRangeBar: PivotChartRenderFunction;

renderRangeColumn: PivotChartRenderFunction;

renderWaterfall: PivotChartRenderFunction;

export function renderBubble(context: RenderContext);

renderConnectedScatter: PivotChartRenderFunction;

renderDensityScatter: PivotChartRenderFunction;

renderHexbin: PivotChartRenderFunction;

export function renderScatter(context: RenderContext);

renderBoxPlot: PivotChartRenderFunction;

renderRangeInterval: PivotChartRenderFunction;

renderViolin: PivotChartRenderFunction;

export function collectStatisticalData(
dataset: PivotChartDataset,
seriesIds?: readonly string[],
): StatisticalDatum[];

export function createDensitySamples(
observations: readonly StatisticalObservation[],
requestedSampleCount = 33,
): DensitySample[];

interface DensitySample {
readonly value: number;
readonly density: number
}

interface StatisticalDatum {
readonly category: PivotChartCategory;
readonly categoryIndex: number;
readonly observations: readonly StatisticalObservation[];
readonly count: number;
readonly minimum: number;
readonly lowerQuartile: number;
readonly median: number;
readonly upperQuartile: number;
readonly maximum: number;
readonly mean: number;
readonly lowerWhisker: number;
readonly upperWhisker: number;
readonly outliers: readonly StatisticalObservation[];
readonly representativeSeriesIndex: number
}

interface StatisticalObservation {
readonly value: number;
readonly seriesIndex: number
}

renderTimelineRange: PivotChartRenderFunction;

renderAnnotatedTimeSeries: PivotChartRenderFunction;

export function resolvePivotChartCellContext(
cell?: ContextMenuCellContext,
): PivotChartCellContext | undefined;

interface PivotChartCellContext {
initialScope: PivotChartInitialScope;
seriesIds: string[];
columnPath: PivotPath;
measure: PivotChartMeasure;
totals?: PivotChartTotalsMode;
categoryMeasure?: Pick<PivotChartMeasure, 'prop' | 'aggregator'>
}

Resolves specialized measure channels only from explicit stable IDs or unambiguous semantic labels. Series position is deliberately never used.

export function resolveSpecializedSeriesBindings(
dataset: PivotChartDataset,
current: PivotChartBindings,
requirements: readonly SpecializedBindingRequirement[],
): SpecializedBindingResolution;

export function resolveMatrixFlowBindings(
dataset: PivotChartDataset,
current: PivotChartBindings,
): {
bindings: PivotChartBindings;
missing: Array<'source' | 'target' | 'weight'>;
};

export function boundSeriesIndex(
dataset: PivotChartDataset,
bindings: PivotChartBindings,
channel: PivotChartBindingChannel,
): number | undefined;

export type SpecializedSeriesChannel =
| 'low'
| 'high'
| 'open'
| 'close'
| 'volume'
| 'actual'
| 'target'
| 'variance'
| 'start'
| 'end';

interface SpecializedBindingRequirement {
channel: SpecializedSeriesChannel;
required: boolean
}

interface SpecializedBindingResolution {
bindings: PivotChartBindings;
missing: SpecializedSeriesChannel[]
}

createPivotChartGeographicRendererInstance

Section titled “createPivotChartGeographicRendererInstance”
export function createPivotChartGeographicRendererInstance(
pack: Pick<PivotChartGeographicCapabilityPack, 'load'>,
initialInput: PivotChartGeographicRenderInput,
): PivotChartGeographicRendererInstance;

export function PivotChartDataControls({
model,
localeText,
onUpdate,
}: PivotChartDataControlsProps);

export function PivotChartDataTable({
dataset,
labels,
}: PivotChartDataTableProps);

interface PivotChartDataTableLabels {
readonly regionAriaLabel: string;
readonly tableCaption: string;
readonly categoryHeader: string;
readonly hierarchySeparator: string;
readonly emptyValue: string;
readonly formatNumber: (value: number) => string;
readonly sortAscending: (columnLabel: string) => string;
readonly sortDescending: (columnLabel: string) => string;
readonly sortedAscending: (columnLabel: string) => string;
readonly sortedDescending: (columnLabel: string) => string
}

interface PivotChartDataTableProps {
readonly dataset: PivotChartDataset;
readonly labels: PivotChartDataTableLabels
}

export function PivotChartDialogHeader({
headerRef,
closable = true,
title,
loading,
downloadFormats,
showingData,
localeText,
onToggleData,
onDownload,
onClose,
}: PivotChartDialogHeaderProps);

export function PivotChartDialogSettings({
model,
series,
dataset,
renderer,
theme,
visibleChartTypes,
presentation,
themeOptions,
disabled,
localeText,
onPresentationChange,
onPresentationCommit,
onUpdate,
}: PivotChartDialogSettingsProps);

export function PivotChartDialogTabs({
active,
chartId,
localeText,
onChange,
}: PivotChartDialogTabsProps);

export type PivotChartDialogTab = 'chart' | 'data' | 'customize';

export function PivotChartDialogVisual({
loading,
empty,
error,
dataset,
showingData,
drillState,
drillLoading,
drillError,
drillPendingLabel,
drillCompletedLabel,
localeText,
onRetry,
onDrillNavigate,
onDrillRetry,
}: PivotChartDialogVisualProps);

PIVOT_CHART_THEME_VALUES: readonly ["auto", "default", "material", "compact", "darkMaterial", "darkCompact"];

export type PivotChartPresentationChangeHandler = <
K extends keyof PivotChartPresentation,
>(
key: K,
value: PivotChartPresentation[K],
) => void;

export type PivotChartThemeOption = readonly [value: string, label: string];

export function PivotChartDrillToolbar({
state,
loading,
error,
pendingLabel,
completedLabel,
localeText,
onNavigate,
onRetry,
}: PivotChartDrillToolbarProps);

export function PivotChartExportMenu({
formats,
disabled,
localeText,
onDownload,
}: PivotChartExportMenuProps);

export function PivotChartGallery({
model,
dataset,
series,
renderer,
supportedTypes,
theme,
localeText,
onUpdate,
}: PivotChartGalleryProps);

export function PivotChartOptionsControls({
model,
localeText,
onUpdate,
}: PivotChartOptionsControlsProps);

export function PivotChartPresentationControls({
chartType,
presentation,
localeText,
onChange,
onCommit,
}: PivotChartPresentationControlsProps);

export function PivotChartPreview({
definition,
renderer,
theme,
localeText,
}: PivotChartPreviewProps);

export function clearPivotChartPreviewCache();

export function PivotChartRelationshipControls({
model,
series,
localeText,
onUpdate,
}: PivotChartRelationshipControlsProps);

export function PivotChartSeriesControl({
model,
series,
localeText,
onUpdate,
}: PivotChartSeriesControlProps);

export function PivotChartThemeControl({
model,
themeOptions,
localeText,
onUpdate,
}: PivotChartThemeControlProps);

export function PivotChartTypeControl({
model,
dataset,
series,
renderer,
theme,
visibleChartTypes,
localeText,
onUpdate,
}: PivotChartTypeControlProps);

export function renderAxes(
context: RenderContext,
scale: Scale,
horizontal: boolean,
percentage = false,
);

export function renderXYAxes(
context: RenderContext,
xScale: Scale,
yScale: Scale,
defaultTitles?: { x: string; y: string },
);

export function appendCategoryLabel(
context: RenderContext,
category: PivotChartCategory,
categoryIndex: number,
categorySize: number,
horizontal: boolean,
origin?: number,
);

DEFAULT_WIDTH: 960;

DEFAULT_HEIGHT: 540;

DEFAULT_PALETTE: readonly ["#4f8fdc", "#f59e42", "#49a35a", "#38b6d4", "#e7c900", "#8b6fc0", "#e66b77", "#5aa69a"];

export function shouldRenderCategoryLabel(
categoryIndex: number,
categoryCount: number,
categorySize: number,
horizontal: boolean,
): boolean;

export function shouldRenderDataLabel(
categoryIndex: number,
seriesIndex: number,
categoryCount: number,
seriesCount: number,
): boolean;

export async function encodeChartImage(
svg: SVGSVGElement,
options: ChartExportSizeOptions,
rendererOptions: PivotChartsRendererOptions,
localeText: PivotChartsLocaleText,
);

export async function encodeChartPdf(
svg: SVGSVGElement,
options: ChartExportSizeOptions,
rendererOptions: PivotChartsRendererOptions,
localeText: PivotChartsLocaleText,
);

export function normalizeFileName(
fileName: string | undefined,
fallback: string,
format: PivotChartDownloadFormat,
);

Starts a fresh delegated interaction scope for one SVG render.

Dense charts use a roving tab stop so the chart remains reachable without placing hundreds or thousands of marks in the document tab order.

export function initializeDatumInteractions(
svg: SVGSVGElement,
input: PivotChartRenderInput,
);

export function makeDatumInteractive(
element: SVGElement,
input: PivotChartRenderInput,
category: PivotChartCategory,
series: PivotChartSeries,
value: number | null,
label: string,
description?: {
ariaLabel: string;
title: string;
channelValues?: PivotChartNodeClick['channelValues'];
channelSeries?: PivotChartNodeClick['channelSeries'];
channelDisplayValues?: DatumDescription['channelDisplayValues'];
},
);

export function getDatumDescription(element: SVGElement);

interface DatumDescription {
readonly category: PivotChartCategory;
readonly series: PivotChartSeries;
readonly value: number | null;
readonly displayValue: string;
readonly title: string;
readonly categoryIndex?: number;
readonly seriesIndex?: number;
readonly channelValues?: PivotChartNodeClick['channelValues'];
readonly channelSeries?: PivotChartNodeClick['channelSeries'];
readonly channelDisplayValues?: Partial<
Record<'x' | 'y' | 'size', string>
>
}

export function applyChartLabelCustomization(
svg: SVGSVGElement,
input: PivotChartRenderInput,
options: PivotChartsRendererOptions,
legendKind: 'series' | 'category' | 'none',
);

export function resolveLegendLayout(
width: number,
height: number,
itemCount: number,
position: LegendLayout['position'],
): LegendLayout;

export function renderLegend(
context: RenderContext,
width: number,
height: number,
layout: LegendLayout,
kind: 'series' | 'category',
);

interface LegendLayout {
readonly position: 'top' | 'right' | 'bottom' | 'left';
readonly columns: number;
readonly itemWidth: number;
readonly visibleItemCount: number;
readonly reservedHeight: number;
readonly reservedWidth: number
}

export function arcPath(
centerX: number,
centerY: number,
innerRadius: number,
outerRadius: number,
startAngle: number,
endAngle: number,
): string;

export function polarPoint(
centerX: number,
centerY: number,
radius: number,
angle: number,
);

export function polarAngle(
index: number,
count: number,
offset = -Math.PI / 2,
): number;

export function renderChart(
svg: SVGSVGElement,
input: PivotChartRenderInput,
options: PivotChartsRendererOptions,
);

export function createSvg<K extends keyof SVGElementTagNameMap>(
document: Document,
name: K,
attributes: Record<string, string | number> = {},
);

export function setAttributes(
element: Element,
attributes: Record<string, string | number>,
);

export function appendRect(
svg: SVGElement,
x: number,
y: number,
width: number,
height: number,
fill: string,
radius = 0,
);

export function appendLine(
svg: SVGElement,
x1: number,
y1: number,
x2: number,
y2: number,
stroke: string,
);

export function appendText(
svg: SVGElement,
x: number,
y: number,
value: string,
attributes: Record<string, string | number>,
);

export function resolveTheme(
input: PivotChartRenderInput,
override?: PivotChartRendererTheme,
): ChartTheme;;

export function initializeChartTooltip(
svg: SVGSVGElement,
input: PivotChartRenderInput,
options: PivotChartsRendererOptions,
categorySeparator: string,
);

export function destroyChartTooltip(svg: SVGSVGElement);

interface ChartBounds {
left: number;
top: number;
width: number;
height: number
}

interface Scale {
min: number;
max: number;
position(value: number): number
}

interface RenderContext {
input: PivotChartRenderInput;
svg: SVGSVGElement;
bounds: ChartBounds;
theme: ChartTheme;
palette: readonly string[];
categorySeparator: string
}

export type PivotChartRenderFunction = (context: RenderContext) => void;

interface PivotChartTooltipOptions {
/** Delay before a pointer tooltip opens. Keyboard tooltips open immediately. */
showDelayMs?: number;
/** Delay before a pointer tooltip closes. */
hideDelayMs?: number;
/** Keep an open pointer tooltip near the cursor. */
followPointer?: boolean;
/** Additional application class names applied to the tooltip root. */
className?: string;
/** Replaces or refines the default semantic tooltip content. */
formatter?: PivotChartTooltipFormatter
}

export function assertSupportedType(
chartType: PivotChartType,
localeText: PivotChartsLocaleText,
);

export function assertChartShape(
chartType: PivotChartType,
dataset: PivotChartDataset,
localeText: PivotChartsLocaleText,
bindings = {},
);

export function assertAlive(
destroyed: boolean,
localeText: PivotChartsLocaleText,
);

export function createValueScale(
rows: Array<Array<number | null>>,
stacked: boolean,
length: number,
normalized = false,
): Scale;

export function createContinuousScale(
values: readonly number[],
length: number,
): Scale;

export function normalizeRows(rows: Array<Array<number | null>>);

export function cumulativeRows(rows: Array<Array<number | null>>);

export function createStackedRows(rows: Array<Array<number | null>>);

export function displayValue(
dataset: PivotChartDataset,
categoryIndex: number,
seriesIndex: number,
localeText: PivotChartsLocaleText,
);

export function flattenCategory(
category: PivotChartCategory,
separator: string,
);

export function formatNumber(
value: number | null,
localeText: PivotChartsLocaleText,
);

renderAreaLine: PivotChartRenderFunction;

renderArea: PivotChartRenderFunction;

export function renderBarChart(
context: RenderContext,
options: BarChartOptions,
);

interface BarChartOptions {
readonly orientation: 'horizontal' | 'vertical';
readonly stacking: 'grouped' | 'stacked' | 'normalized'
}

renderColumnLine: PivotChartRenderFunction;

export function renderCombinationChart(
context: RenderContext,
options: CombinationChartOptions,
);

interface CombinationChartOptions {
readonly primary: 'column' | 'area'
}

renderDonut: PivotChartRenderFunction;

renderGroupedBar: PivotChartRenderFunction;

renderGroupedColumn: PivotChartRenderFunction;

export function renderLineAreaChart(
context: RenderContext,
options: LineAreaChartOptions,
);

interface LineAreaChartOptions {
readonly area: boolean;
readonly interpolation: LineAreaInterpolation;
readonly stacking: 'none' | 'stacked' | 'normalized'
}

export function createLinePath(
points: readonly LineAreaPoint[],
interpolation: LineAreaInterpolation,
): string;

export function createAreaPath(
top: readonly LineAreaPoint[],
baseline: readonly LineAreaPoint[],
interpolation: LineAreaInterpolation,
): string;

interface LineAreaPoint {
readonly x: number;
readonly y: number
}

export type LineAreaInterpolation = 'linear' | 'smooth' | 'step';

renderLine: PivotChartRenderFunction;

renderNormalizedArea: PivotChartRenderFunction;

renderNormalizedBar: PivotChartRenderFunction;

renderNormalizedColumn: PivotChartRenderFunction;

renderPie: PivotChartRenderFunction;

export function renderPolarChart(
context: RenderContext,
options: PolarChartOptions,
);

interface PolarChartOptions {
readonly donut: boolean;
readonly startAngle?: number;
readonly sweepAngle?: number;
readonly mark?: string
}

renderSemiDonut: PivotChartRenderFunction;

renderSmoothLine: PivotChartRenderFunction;

renderStackedArea: PivotChartRenderFunction;

renderStackedBar: PivotChartRenderFunction;

renderStackedColumn: PivotChartRenderFunction;

renderSteppedArea: PivotChartRenderFunction;

renderSteppedLine: PivotChartRenderFunction;

export function createWaffleSlices(
dataset: PivotChartDataset,
seriesId?: string,
cellCount = 100,
): WaffleSlice[];

interface WaffleSlice {
readonly category: PivotChartCategory;
readonly categoryIndex: number;
readonly series: PivotChartSeries;
readonly seriesIndex: number;
readonly value: number;
readonly cells: number
}

export function collectDistributionData(
dataset: PivotChartDataset,
seriesId?: string,
): DistributionDatum[];

export function createHistogramBins(
data: readonly DistributionDatum[],
requestedBinCount?: number,
): HistogramBin[];

interface DistributionDatum {
category: PivotChartCategory;
categoryIndex: number;
series: PivotChartSeries;
seriesIndex: number;
value: number
}

interface HistogramBin {
index: number;
start: number;
end: number;
count: number;
mean: number;
data: DistributionDatum[]
}

export function renderPriceSeries(
context: RenderContext,
options: PriceRenderOptions,
);

export type PriceMarkKind = 'candlestick' | 'ohlc';

interface PriceRenderOptions {
readonly kind: PriceMarkKind;
readonly bounds?: ChartBounds;
readonly attributePrefix: string;
readonly renderAxes?: boolean;
readonly renderCategoryLabels?: boolean
}

export function collectFinancialData(
dataset: PivotChartDataset,
bindings: PivotChartBindings,
requireVolume = false,
): FinancialDatum[];

interface FinancialDatum {
readonly categoryIndex: number;
readonly open: number;
readonly high: number;
readonly low: number;
readonly close: number;
readonly volume?: number;
readonly openSeriesIndex: number;
readonly highSeriesIndex: number;
readonly lowSeriesIndex: number;
readonly closeSeriesIndex: number;
readonly volumeSeriesIndex?: number
}

export function collectHierarchyValues(
dataset: PivotChartDataset,
): readonly HierarchyCategoryValue[];

export function commonCategoryPrefix(
categories: readonly PivotChartCategory[],
): readonly string[];

interface HierarchySeriesValue {
readonly category: PivotChartCategory;
readonly categoryIndex: number;
readonly series: PivotChartSeries;
readonly seriesIndex: number;
readonly value: number
}

interface HierarchyCategoryValue {
readonly category: PivotChartCategory;
readonly categoryIndex: number;
readonly total: number;
readonly values: readonly HierarchySeriesValue[]
}

export function renderGaugeChart(
context: RenderContext,
options: GaugeOptions,
);

interface GaugeOptions {
readonly kind: 'semi' | 'radial';
readonly attributePrefix: string
}

export function resolveKpiLayouts(
bounds: ChartBounds,
count: number,
): KpiLayout[];

interface KpiLayout {
readonly index: number
}

export function collectKpiData(
dataset: PivotChartDataset,
bindings: PivotChartBindings,
): KpiDatum[];

interface KpiDatum {
readonly categoryIndex: number;
readonly actual: number;
readonly target: number;
readonly variance: number;
readonly progress: number;
readonly actualSeriesIndex: number;
readonly targetSeriesIndex: number;
readonly varianceSeriesIndex?: number
}

export function createHeatmapBuckets(
dataset: PivotChartDataset,
maximumRows: number,
maximumColumns: number,
): HeatmapBucket[];

export function collectCalendarData(
dataset: PivotChartDataset,
seriesId?: string,
): CalendarDatum[];

interface HeatmapBucket {
row: number;
column: number;
rowStart: number;
rowEnd: number;
columnStart: number;
columnEnd: number;
count: number;
value: number;
category: PivotChartCategory;
series: PivotChartSeries
}

interface CalendarDatum {
category: PivotChartCategory;
categoryIndex: number;
series: PivotChartSeries;
seriesIndex: number;
value: number;
epochDay: number;
day: number;
week: number
}

export function renderPolarColumnChart(
context: RenderContext,
options: PolarColumnOptions,
);

export type PolarColumnMode = 'grouped' | 'stacked' | 'normalized';

interface PolarColumnOptions {
mode: PolarColumnMode
}

export function resolvePolarLayout(
context: RenderContext,
labelPadding = 26,
): PolarLayout;

export function finitePositiveMaximum(
values: ReadonlyArray<ReadonlyArray<number | null>>,
categoryIndexes?: readonly number[],
): number;

export function appendPolarGrid(
context: RenderContext,
layout: PolarLayout,
axes = true,
);

export function valueAt(
context: RenderContext,
categoryIndex: number,
seriesIndex: number,
): number | null;

interface PolarLayout {
centerX: number;
centerY: number;
radius: number;
categoryIndexes: number[]
}

export function renderRadarChart(
context: RenderContext,
options: RadarOptions,
);

interface RadarOptions {
area: boolean
}

export function renderRadialBarChart(
context: RenderContext,
options: RadialBarOptions,
);

interface RadialBarOptions {
multiRing: boolean
}

export function renderProcessChart(
context: RenderContext,
shape: ProcessShape,
);

export function createProcessBands(
values: readonly number[],
bounds: ProcessBounds,
shape: ProcessShape,
): readonly ProcessBand[];

export type ProcessShape = 'funnel' | 'pyramid';

interface ProcessBounds {
readonly left: number;
readonly top: number;
readonly width: number;
readonly height: number
}

interface ProcessBand {
readonly index: number;
readonly value: number;
readonly top: number;
readonly bottom: number;
readonly topWidth: number;
readonly bottomWidth: number;
readonly points: string
}

export function collectProcessStages(
dataset: PivotChartDataset,
): readonly ProcessStage[];

interface ProcessStage {
readonly category: PivotChartCategory;
readonly categoryIndex: number;
readonly series: PivotChartSeries;
readonly seriesIndex: number;
readonly value: number
}

export function renderRangeChart(
context: RenderContext,
options: RangeChartOptions,
);

interface RangeChartOptions {
readonly kind: 'bar' | 'area' | 'interval';
readonly orientation?: 'horizontal' | 'vertical';
readonly valueMode?: RangeValueMode;
readonly attribute: string
}

export function collectRangeData(
dataset: PivotChartDataset,
bindings: PivotChartBindings,
mode: RangeValueMode = 'bounds',
): RangeDatum[];

interface RangeDatum {
readonly categoryIndex: number;
readonly lower: number;
readonly upper: number;
readonly center?: number;
readonly lowerSeriesIndex: number;
readonly upperSeriesIndex: number;
readonly centerSeriesIndex?: number
}

export type RangeValueMode = 'bounds' | 'centerBounds';

export function createDensityBins(
points: readonly DensityPoint[],
radius: number,
): DensityBin[];

interface DensityPoint {
category: PivotChartCategory;
categoryIndex: number;
xSeries: PivotChartSeries;
xSeriesIndex: number;
ySeries: PivotChartSeries;
ySeriesIndex: number;
x: number;
y: number;
plotX: number;
plotY: number
}

interface DensityBin {
column: number;
row: number;
count: number;
x: number;
y: number;
plotX: number;
plotY: number;
points: DensityPoint[]
}

export function renderRelationshipChart(
context: RenderContext,
options: RelationshipChartOptions,
);

interface RelationshipChartOptions {
bubble: boolean
}

export function prepareStatisticalChart(
context: RenderContext,
options?: {
valueExtent?: (datum: StatisticalDatum) => readonly [number, number];
},
): StatisticalChartLayout | undefined;

export function appendStatisticalCategoryLabels(
context: RenderContext,
categorySize: number,
);

export function statisticalCategoryCenter(
context: RenderContext,
categoryIndex: number,
categorySize: number,
);

export function statisticalValueY(
context: RenderContext,
scale: StatisticalChartLayout['scale'],
value: number,
);

interface StatisticalChartLayout {
readonly data: StatisticalDatum[];
readonly scale: ReturnType<typeof createValueScale>;
readonly categorySize: number
}