---
id: "packages/active-charts/all-exports/chart-options"
title: "Chart options"
description: "AnimationCompleteEvent, AnimationOptions, ChartDatum, ChartOptions and 9 more: generated from the source of active-charts."
url: "/packages/active-charts/all-exports/chart-options"
locale: "en"
revision: "g0mvjxwj5c-88bdbe1c:chart-options"
---

# Chart options

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

## Types

**AnimationCompleteEvent**

```ts
interface AnimationCompleteEvent {
  type: 'load' | 'update';
}
```

Payload for the `onAnimationComplete` callback.
- `'load'`: initial mount animation finished (or immediately if animation disabled).
- `'update'`: data-update transition finished.

**AnimationOptions**

```ts
interface AnimationOptions {
  enabled?: boolean;
  profile?: ChartMotionProfile;
  entrance?: boolean | EntranceMotionOptions;
  update?: boolean | UpdateMotionOptions;
  exit?: boolean | ExitMotionOptions;
  tooltip?: boolean | InteractionMotionOptions;
  attention?: boolean | InteractionMotionOptions;
  replay?: ReplayMotionOptions;
}
```

How a chart moves: one profile and a few semantic classes, each
`false` to switch it off or an object to tune it. Serialisable: numbers,
names and booleans only. `animation: false` (or `enabled: false`) turns
every interpolation off; the tooltip, the crosshair, the current item,
selection, keyboard and announcements all keep working. A reader's
`prefers-reduced-motion: reduce` does the same and cannot be overridden.

**ChartDatum**

```ts
type ChartDatum = Record<
  string,
  number | string | Date | boolean | number[] | null | undefined
>;
```

**ChartOptions**

```ts
interface ChartOptions<TDatum extends ChartDatum = ChartDatum> {
  series: SeriesOptions[];
  axes?: AxisOptions[];
  tooltip?: TooltipOptions | boolean;
  legend?: LegendOptions | boolean;
  sizeLegend?: boolean;
  crossLines?: CrossLineOptions[];
  padding?: Padding;
  accessibility?: AccessibilityOptions;
  maxPoints?: number;
  dataGrouping?: DataGroupingOptions | boolean;
  crosshairs?: CrosshairOptions | boolean;
  zoom?: ZoomOptions | boolean;
  navigator?: NavigatorOptions | boolean;
  sync?: ChartSyncOptions | boolean;
  selection?: ChartSelectionOptions | boolean;
  annotations?: AnnotationOptions[];
  contextMenu?:
    | ChartContextMenuOptions<
        CartesianPoint<TDatum>,
        'copy' | 'zoom' | 'series' | 'export'
      >
    | boolean;
  animation?: Omit<AnimationOptions, 'replay'> | boolean;
  colors?: string[];
}
```

The options of a low-level `<Chart>`. `TDatum` is the row shape of its
`data`: the context menu hands the host a `CartesianPoint<TDatum>`.

**ChoreographyLayer**

```ts
interface ChoreographyLayer {
  match: string | string[];
  delay: number;
}
```

Choreography layer — groups one or more series into a single entrance "wave".

`match` is matched against each series's `id` (preferred) or `name`. When the
match list contains the series identifier, the layer's `delay` is used instead
of the auto-stagger. Series not matched by any layer keep their stagger delay.

**ExitMotionOptions**

```ts
interface ExitMotionOptions {
  enabled?: boolean;
  type?: import('./animation-types').ExitAnimationType;
  duration?: number;
  easing?: ChartMotionEasing;
}
```

The departure of a series hidden through the legend. Off by default:
`true` or an object turns it on (a series may also ask on its own).

**EntranceMotionOptions**

```ts
interface EntranceMotionOptions {
  enabled?: boolean;
  duration?: number;
  easing?: ChartMotionEasing;
  type?: import('./animation-types').AnimationType;
  stagger?: number;
  layers?: ChoreographyLayer[];
}
```

The first appearance of the chart's marks. On by default.

**UpdateMotionOptions**

```ts
interface UpdateMotionOptions {
  enabled?: boolean;
  duration?: number;
  easing?: ChartMotionEasing;
}
```

The move to new values when the data changes. On by default; `false`
switches it off. Line, area, scatter, bar, histogram, waterfall,
candlestick and OHLC series move; range, box plot, dumbbell and lollipop
series redraw (their charts do not take `update`).

**InteractionMotionOptions**

```ts
interface InteractionMotionOptions {
  enabled?: boolean;
  duration?: number;
}
```

A reading surface (the tooltip, the heatmap's colour-key marker) or the
attention of the context. One duration; the curve, the hide grace and every
placement rule are the product's. The pointer, the crosshair and the
current item are never delayed.

**ReplayMotionOptions**

```ts
interface ReplayMotionOptions {
  duration?: number;
}
```

The replay of a scalar's entrance (gauge, linear gauge, bullet).

**ChartMotionProfile**

```ts
type ChartMotionProfile = 'calm' | 'responsive';
```

The motion profile every unset field defaults from. `calm` (the
default) is the product's measured, unhurried feel; `responsive` is shorter
in every class. There is no "none" profile: `animation: false` turns every
interpolation off.

**ChartMotionEasing**

```ts
type ChartMotionEasing =
  'calm' | 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
```

A named curve. `calm` is cubic ease-out (`cubic-bezier(0.33, 1, 0.68, 1)`,
no overshoot), the default of every class that takes an easing; the others
are the CSS keywords of the same name.

**Padding**

```ts
interface Padding {
  top?: number;
  right?: number;
  bottom?: number;
  left?: number;
}
```