Chart options

AnimationCompleteEvent, AnimationOptions, ChartDatum, ChartOptions and 9 more: generated from the source of active-charts.

Exported by @workspace/active-charts. Generated from the package source; part of the index of every export.

Types#

AnimationCompleteEvent

Payload for the onAnimationComplete callback.

'load': initial mount animation finished (or immediately if animation disabled).
'update': data-update transition finished.

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

AnimationOptions

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.

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

ChartDatum

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

ChartOptions

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

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[];
}

ChoreographyLayer

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.

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

ExitMotionOptions

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).

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

EntranceMotionOptions

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

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

UpdateMotionOptions

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).

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

InteractionMotionOptions

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.

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

ReplayMotionOptions

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

interface ReplayMotionOptions {
  duration?: number;
}

ChartMotionProfile

Type: 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

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.

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

Padding

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