---
id: "packages/active-charts/all-exports/chart"
title: "Chart"
description: "Chart, ChartProps: generated from the source of active-charts."
url: "/packages/active-charts/all-exports/chart"
locale: "en"
revision: "g0mvjxwj5c-88bdbe1c:chart"
---

# Chart

Exported by `@workspace/active-charts`. Generated from the package source; part of [the index of every export](/packages/active-charts/all-exports).

## `Chart`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `data` | `TDatum[]` | yes | Chart data — array of objects. |
| `height` | `number` | yes | Container height in pixels. |
| `options` | `ChartOptions<TDatum>` | yes | Full configuration object. Its context menu hands the host the `CartesianPoint<TDatum>` of a row. |
| `className` | `string` | no | Optional className for the outer container. |
| `defaultSelectedItems` | `readonly ChartItemRef[]` | no | The initial selection of an uncontrolled chart. |
| `dir` | `"ltr" \| "rtl"` | no | The chart's UI direction: explicit here, else inherited from the page, else `ltr`; never inferred from `locale`. It governs the chart's HTML text and chrome, never the axes or the data order. |
| `events` | `(ChartEvents & ChartSelectionEvents<TDatum, ChartSeriesItem<TDatum>>)` | no | The events as one bundle, as on every family: an event given here counts like its individual prop, and the individual prop wins. |
| `legendLink` | `ChartLegendLink` | no | Connects the chart's legend to `useChartLegend()`, for a legend the host renders itself. Give one link to one chart. |
| `locale` | `ValuePresentation` | no | Presentation input for axis labels, tooltips, and crosshairs: a locale code, or a presentation-context object accepted by the central active-format formatters. When omitted, `<ChartDefaults>` supplies it; with neither, the chart throws a configuration error (no `'en'` fallback). |
| `onAnimationComplete` | `((event: AnimationCompleteEvent) => void)` | no | Fired when a chart animation completes. - `'load'`: initial mount animation finished (or immediately if animation disabled / prefers-reduced-motion is active). - `'update'`: data-update transition finished.  Not triggered by zoom animations (use `onZoomChange`) or tooltip fades. |
| `onExportComplete` | `((result: ChartExportResult) => void)` | no | Fired after a successful export action (PNG/SVG/CSV/PDF), including from the context menu and from imperative `ChartHandle` calls. |
| `onExportError` | `((format: ChartExportFormat, error: unknown) => void)` | no | Fired when an export could not produce its file (W11), from the handle as well as from the context menu. Without it a failed context-menu export is reported as an error diagnostic (`<ChartDefaults diagnostics>`). |
| `onItemActivate` | `((item: ChartSeriesItem<TDatum>, source: ChartInteractionSource) => void)` | no | Fired when the reader activates an item: a click or tap on it, or `Enter` on the focused item (`Shift+Enter` on a sankey, whose `Enter` moves between nodes and links). With a handler, `Enter` activates instead of opening the context menu (`Shift+F10` and the context-menu key still open it). |
| `onLegendChange` | `((change: ChartLegendChange) => void)` | no | Fired once for every legend change the chart applies: a hide, a show, an isolation or a show-all, from the built-in legend (click, key, double click, double tap), its menu, or `useChartLegend()`. The change names the entry and its target by identity and lists every hidden target after it. A refused action (the last visible target, `legend.interactive: false`) changes nothing and reports nothing. |
| `onReady` | `(() => void)` | no | Fired exactly once per chart instance, after the first successful mount with valid dimensions and before any entrance animation starts. See {@link ChartEvents.onReady} for the full semantics. |
| `onSelectionChange` | `((selection: ChartItemRef[], change: ChartSelectionChange<TDatum, ChartSeriesItem<TDatum>>) => void)` | no | Fired when the reader changes the selection (pointer, touch or keyboard), and when an uncontrolled selection drops items the data no longer contains. `selection` is the complete selection the change makes; it keeps every reference the selection held, of whatever form. On a controlled chart it is a proposal (`change.requested: true`), computed from the current `selectedItems` and never from an earlier proposal; the host applies it, changes it or ignores it. |
| `onZoomChange` | `((startFraction: number, endFraction: number, yStartFraction?: number, yEndFraction?: number) => void)` | no | Fired when the zoom range changes (after animation completes). Fractions [0..1]. Y params are only provided when Y-zoom is active. Cartesian charts only. |
| `selectedItems` | `readonly ChartItemRef[]` | no | The selection, controlled by the host. The chart draws, announces and lists the items it resolves to and never changes it; the host updates it from `onSelectionChange`. A request the host applies is announced when the host passes it back; one it ignores is never announced. A reference to an item that is hidden, zoomed or drilled out of view, or not in the data stays in the host's selection and is not shown as selected. |
| `t` | `ChartTranslateFn` | no | The host translator for every text the chart shows or announces. When omitted, `<ChartDefaults>` supplies it; with neither, the chart throws a configuration error (no English fallback, ADR-028). |
| `width` | `number` | no | Optional fixed width in pixels. When omitted (default), width is measured responsively from the container. When provided, responsive measurement is skipped and this value is used directly. |

## Types

**ChartProps**

```ts
interface ChartProps<TDatum extends ChartDatum = ChartDatum>
  extends ChartEvents, ChartSelectionState, ChartSelectionEvents<TDatum> {
  data: TDatum[];
  options: ChartOptions<TDatum>;
  events?: ChartEvents & ChartSelectionEvents<TDatum>;
  height: number;
  width?: number;
  className?: string;
  dir?: 'ltr' | 'rtl';
  locale?: ChartPresentation;
  t?: ChartTranslateFn;
  onReady?: () => void;
  legendLink?: ChartLegendLink;
}
```