chartist 2.0.0-rc.3 → 2.0.0

package/dist/index.d.ts

@@ -512,10 +512,14 @@ export interface AnimationDefinition {
   /** The `id` of the `<animate>` element, to start other animations relative to it. */
   id?: string;
   /**
-   * The easing: a name from {@link easings} or four numbers of a cubic
-   * Bézier curve. Sets `calcMode`, `keySplines` and `keyTimes` for you.
-   */
-  easing?: number[] | keyof typeof easings;
+   * The easing: a name from {@link easings}, four numbers of a cubic
+   * Bézier curve, or a CSS easing such as `'ease-out'`,
+   * `'cubic-bezier(0.34, 1.56, 0.64, 1)'`, `linear()` or `steps()`. Sets
+   * `calcMode`, `keySplines` and `keyTimes` for you, or, for easings SMIL
+   * can't express (ones that overshoot, `linear()`, `steps()`), `values`
+   * sampled between `from` and `to`.
+   */
+  easing?: number[] | keyof typeof easings | (string & {});
   /** How values are interpolated (SMIL `calcMode`); an `easing` sets `'spline'`. */
   calcMode?: 'discrete' | 'linear' | 'paced' | 'spline';
   /** Whether the animation can restart while it's running (SMIL `restart`). */
@@ -528,6 +532,8 @@ export interface AnimationDefinition {
   keySplines?: string;
   /** The times of the key values, from `0` to `1` (SMIL `keyTimes`); an `easing` sets them. */
   keyTimes?: string;
+  /** The values in between, `;`-separated (SMIL `values`); an easing that overshoots sets them. */
+  values?: string;
   /** `'freeze'` keeps the last value after the animation, `'remove'` resets it. Guided mode sets `'freeze'`. */
   fill?: string;
   /** The minimum active duration (SMIL `min`). */
@@ -617,6 +623,46 @@ export declare const easings: {
   easeOutBack: number[];
   easeInOutBack: number[];
 };
+/**
+ * The SMIL `keySplines` of an easing SMIL can express: a cubic Bézier
+ * curve whose four numbers lie within 0 and 1 (the CSS keywords, many
+ * `cubic-bezier()` curves, most names of {@link easings}). Browsers ignore
+ * an animation whose `keySplines` leave that range, so for other easings
+ * it returns nothing: sample them with {@link sampleEasing} instead.
+ *
+ * @example
+ * ```ts
+ * import { keySplinesOf } from 'chartist';
+ *
+ * keySplinesOf('ease-out'); // '0 0 0.58 1'
+ * keySplinesOf('easeOutBack'); // undefined: it overshoots
+ * ```
+ * @param easing A CSS easing, a name of {@link easings}, or four numbers
+ * @returns The `keySplines` value, or nothing
+ */
+export declare function keySplinesOf(easing: string | readonly number[]): string | undefined;
+/**
+ * The eased progress of an animation at evenly spaced times, for SMIL
+ * `values` with even `keyTimes`: 12 points, and one per 50 ms for
+ * animations longer than 600 ms, at most 40. It takes the CSS easings
+ * (the keywords, `cubic-bezier()` curves, also ones that overshoot,
+ * `linear()` and `steps()`), the names of {@link easings} and four
+ * numbers of a cubic Bézier curve; anything else is sampled as `ease`.
+ * Points lie below 0 or above 1 where the easing overshoots.
+ *
+ * @example
+ * ```ts
+ * import { sampleEasing } from 'chartist';
+ *
+ * // A value that grows from 10 to 20 and overshoots a little on the way.
+ * const progress = sampleEasing('cubic-bezier(0.34, 1.56, 0.64, 1)', 400);
+ * const values = progress.map(p => 10 + (20 - 10) * p).join(';');
+ * ```
+ * @param easing The easing
+ * @param duration The animation's duration in ms
+ * @returns The progress at each point, from 0 to 1
+ */
+export declare function sampleEasing(easing: string | readonly number[], duration: number): number[];
 //#endregion
 //#region src/svg/SvgPath.d.ts
 /**
@@ -887,7 +933,6 @@ interface TextMetrics {
 }
 /**
  * How labels are drawn: HTML in a `foreignObject` (1.x) or SVG `text`.
- * @experimental
  */
 type LabelMode = 'html' | 'svg';
 /** What a {@link MeasureText} function gets with the text to measure. */
@@ -957,7 +1002,6 @@ type MeasureStyle = (property: string, options?: MeasureStyleOptions) => string
  * below the top of the line (a typical font's ascent). Lines are one font
  * size apart, so a renderer finds a line's vertical center at
  * `y - (textAscent - 0.5) * fontSize` from its `y`.
- * @experimental
  */
 export declare const textAscent = 0.85;
 /**
@@ -975,10 +1019,129 @@ export declare const textAscent = 0.85;
  *   return { ...size, width: size.width * 1.1 };
  * };
  * ```
- * @experimental
  */
 export declare const estimateText: MeasureText;
 //#endregion
+//#region src/render/types.d.ts
+/**
+ * Why a chart rendered: `create` for its first render, `update` for
+ * `update()` (and the presets' `setOptions()`), `resize` when its
+ * container's size changed, `responsive` when its matching `responsive`
+ * entries changed, `fonts` when web fonts finished loading.
+ */
+type RenderCause = 'create' | 'update' | 'resize' | 'responsive' | 'fonts';
+/**
+ * What a render did to one node of the output: `add` for a node the
+ * previous scene didn't have, `update` for a node whose attributes,
+ * classes or text changed (with its `previous` node), `remove` for a node
+ * of the previous scene that's gone.
+ */
+interface SceneChange {
+  /** What happened to the node. */
+  readonly op: 'add' | 'update' | 'remove';
+  /** The node: of the new scene, or of the previous one for `remove`. */
+  readonly node: SceneNode;
+  /** The node in the previous scene, for `update`. */
+  readonly previous?: SceneNode;
+}
+/**
+ * The keyframes of a node's update animation: one set of attributes per
+ * progress point, in the order of the points.
+ */
+type Keyframes = readonly Readonly<Record<string, AttrValue>>[];
+/**
+ * The timing of a render's update animation: its duration in ms and its
+ * easing as a CSS easing, such as `ease-out`.
+ */
+interface UpdateAnimation {
+  /** The duration in ms. */
+  readonly duration: number;
+  /** The CSS easing, such as `ease-out` or `cubic-bezier(0.3, 0, 0.2, 1)`. */
+  readonly easing: string;
+}
+/**
+ * What a renderer gets about the previous render, from a chart's second
+ * render on. A renderer can change its previous output in place with it,
+ * instead of replacing it; renderers keep no state themselves.
+ */
+interface RenderUpdate<TOutput extends RenderOutput = RenderOutput> {
+  /** What this renderer returned for the previous render. */
+  readonly previous: TOutput;
+  /** The previous render's scene. */
+  readonly previousScene: SceneNode;
+  /** Why the chart renders. */
+  readonly cause: RenderCause;
+  /** The data's labels, for keys from labels. */
+  readonly labels: readonly unknown[];
+  /** The previous render's labels, for keys from labels in the previous scene. */
+  readonly previousLabels: readonly unknown[];
+  /**
+   * Asks the chart's plugins, then the layer that drew the node, for the
+   * keyframes of a node's update at the given progress points (0 is the
+   * previous node, 1 the new one; points may lie beyond them when the
+   * easing overshoots). Returns nothing when none of them has any.
+   */
+  readonly keyframes: (previous: SceneNode, next: SceneNode, progress: readonly number[]) => Keyframes | undefined;
+}
+/**
+ * What a renderer returns from `render()`. The `render` and `mount` phase
+ * events pass it on as `output`.
+ */
+interface RenderOutput {
+  /** The rendered element of a scene node, if the output is DOM. */
+  readonly elementOf?: (node: SceneNode) => Element | undefined;
+  /** Removes the output again. */
+  readonly remove?: () => void;
+  /**
+   * `true` when the renderer changed its previous output in place with
+   * the `update` it got, instead of replacing it. Then `changes` says what
+   * it did.
+   */
+  readonly patched?: boolean;
+  /**
+   * What the renderer did to each changed node, with `patched`. Without
+   * them, the chart describes the render as a replacement.
+   */
+  readonly changes?: readonly SceneChange[];
+  /**
+   * The timing of the update animation the renderer started, if any. The
+   * `mount` event passes it on as `animation`.
+   */
+  readonly animation?: UpdateAnimation;
+}
+/**
+ * Turns a scene into output. `chart()` renders inline SVG into its
+ * container with the DOM renderer, unless its config sets a `renderer`.
+ * To get markup instead, without a DOM, use `toScene()` and
+ * {@link renderToString}.
+ */
+interface Renderer<TOutput extends RenderOutput = RenderOutput> {
+  /**
+   * Renders a scene into the chart's container, after the `scene` phase
+   * and on every update and resize. From the second render on, it gets
+   * the previous render as `update`: a renderer that changes its previous
+   * output in place returns `patched: true` and its `changes`; one that
+   * ignores `update` replaces its output, as the DOM renderer does.
+   * @param scene The scene to render, its root the `svg`
+   * @param target The chart's container element
+   * @param update The previous render, from the chart's second render on
+   */
+  render(scene: SceneNode, target: Element, update?: RenderUpdate<TOutput>): TOutput;
+  /**
+   * Measures text for layout, in the container so its CSS applies;
+   * without it, Chartist estimates text sizes.
+   */
+  readonly measureText?: MeasureText;
+  /**
+   * Reads computed styles for layout, in the container so its CSS
+   * applies; without it, layout uses its defaults (a donut's ring is
+   * laid out for 60 px).
+   */
+  readonly measureStyle?: MeasureStyle;
+  /** The default label mode of this renderer; `html` if omitted. */
+  readonly labels?: LabelMode;
+}
+//#endregion
 //#region src/charts/types.d.ts
 /**
  * The 1.x events every chart class emits and their payloads, by event name.
@@ -1175,47 +1338,6 @@ interface PipelineOptions {
   readonly preset?: ResolvedConfig['preset'];
 }
 //#endregion
-//#region src/render/types.d.ts
-/**
- * What a renderer returns from `render()`. The `render` and `mount` phase
- * events pass it on as `output`.
- */
-interface RenderOutput {
-  /** The rendered element of a scene node, if the output is DOM. */
-  readonly elementOf?: (node: SceneNode) => Element | undefined;
-  /** Removes the output again. */
-  readonly remove?: () => void;
-}
-/**
- * Turns a scene into output. `chart()` renders inline SVG into its
- * container with the DOM renderer, unless its config sets a `renderer`.
- * To get markup instead, without a DOM, use `toScene()` and
- * {@link renderToString}.
- * @experimental
- */
-interface Renderer<TOutput extends RenderOutput = RenderOutput> {
-  /**
-   * Renders a scene into the chart's container, after the `scene` phase
-   * and on every update and resize.
-   * @param scene The scene to render, its root the `svg`
-   * @param target The chart's container element
-   */
-  render(scene: SceneNode, target: Element): TOutput;
-  /**
-   * Measures text for layout, in the container so its CSS applies;
-   * without it, Chartist estimates text sizes.
-   */
-  readonly measureText?: MeasureText;
-  /**
-   * Reads computed styles for layout, in the container so its CSS
-   * applies; without it, layout uses its defaults (a donut's ring is
-   * laid out for 60 px).
-   */
-  readonly measureStyle?: MeasureStyle;
-  /** The default label mode of this renderer; `html` if omitted. */
-  readonly labels?: LabelMode;
-}
-//#endregion
 //#region src/responsive/responsive.d.ts
 /**
  * Responsive entries: `[condition, overrides]` pairs, merged in order when
@@ -1226,7 +1348,9 @@ interface Renderer<TOutput extends RenderOutput = RenderOutput> {
 /**
  * A container query condition for a responsive entry, created with
  * {@link container}.
- * @experimental
+ * @experimental It rests on `Element.matchContainer()`, a draft standard
+ *   (w3c/csswg-drafts#6205), through a polyfill: it may still change in a
+ *   2.x minor.
  */
 interface ContainerCondition {
   /** Always `container`: tells the condition from a media query string. */
@@ -1239,14 +1363,12 @@ interface ContainerCondition {
  * `(max-width: 640px)` (as in 1.x), or a {@link container} condition.
  * Media queries are matched in the window of the chart's container, so a
  * chart in an iframe follows the iframe's viewport.
- * @experimental
  */
 type ResponsiveCondition = string | ContainerCondition;
 /**
  * A responsive entry: a condition and the overrides that apply while it
  * matches, e.g. `['(max-width: 640px)', { showPoint: false }]`. Matching
  * entries apply in order, so later ones win.
- * @experimental
  */
 type ResponsiveEntry<T> = readonly [ResponsiveCondition, T];
 /**
@@ -1282,13 +1404,14 @@ type ResponsiveEntry<T> = readonly [ResponsiveCondition, T];
  *   ]
  * );
  * ```
- * @experimental
+ * @experimental It rests on `Element.matchContainer()`, a draft standard
+ *   (w3c/csswg-drafts#6205), through a polyfill: it may still change in a
+ *   2.x minor.
  */
 export declare function container(query: string): ContainerCondition;
 /**
  * Watches the conditions of a {@link ResponsiveSet}'s entries, as its
  * `watch()` returns it: which entries match, and when that changes.
- * @experimental
  */
 interface ResponsiveWatcher {
   /** Indexes of the matching entries, as of the last `check()`. */
@@ -1302,7 +1425,6 @@ interface ResponsiveWatcher {
  * Responsive entries for `chart()`, with the watcher that evaluates them.
  * Created by `responsive()`, so charts without responsive entries don't
  * bundle the watcher.
- * @experimental
  */
 interface ResponsiveSet<T> {
   /** The entries as given to `responsive()`. */
@@ -1359,7 +1481,6 @@ interface ResponsiveSet<T> {
  *   ])
  * });
  * ```
- * @experimental
  */
 export declare function responsive<T>(entries: readonly ResponsiveEntry<T>[]): ResponsiveSet<T>;
 //#endregion
@@ -1379,7 +1500,6 @@ export declare function responsive<T>(entries: readonly ResponsiveEntry<T>[]): R
  * ```
  *
  * `chartist/compat` declares the 1.x events (`draw`, `created`, …).
- * @experimental
  */
 interface ChartEvents {
   /**
@@ -1437,7 +1557,6 @@ type CustomEventName = keyof ChartEvents & string;
  *
  * barChart('#chart', { series: [[5, 4, 3, 7]] }, { plugins: [threshold(5)] });
  * ```
- * @experimental
  */
 interface ChartPlugin<TOptions = unknown> {
   /** Names the plugin. Prefix your custom events with it to keep them apart. */
@@ -1453,10 +1572,53 @@ interface ChartPlugin<TOptions = unknown> {
    * chart's handle. Listeners registered here stay for every later render,
    * after updates and resizes too, and `off(name)` without a listener
    * leaves them alone: remove one with its reference.
+   *
+   * Return a function to undo what `install` set up outside the chart,
+   * such as a listener on the document: `destroy()` calls it once, after
+   * the chart's output is removed. `detach()` doesn't.
    * @param chart The chart's handle, to listen to events and emit them.
    * @param options The options of a `[plugin, options]` entry, if any.
+   * @returns A cleanup function for `destroy()`, or anything else, which is
+   *   ignored (so `install: chart => chart.on(…)` stays valid).
+   */
+  install(chart: ChartHandle, options?: TOptions): unknown;
+  /**
+   * Gives the keyframes of a node's update animation, for nodes that don't
+   * move well number by number, such as a path the plugin draws. A
+   * renderer that animates updates (`smilAnimations()` from
+   * `chartist/live`) asks it once per update, never per frame, with the
+   * progress points of the chart's easing: 0 is the previous node, 1 the
+   * new one, and points beyond them come from an easing that overshoots.
+   * Plugins are asked in their order, before the layer that drew the node;
+   * the first one that returns keyframes wins.
+   *
+   * @example
+   * ```ts
+   * import type { ChartPlugin } from 'chartist';
+   *
+   * // Turns the gauge needle the plugin draws (its angle in `ct:angle`),
+   * // instead of morphing its path.
+   * const needle: ChartPlugin = {
+   *   name: 'needle',
+   *   install() {},
+   *   keyframes(previous, next, progress) {
+   *     if (!next.classes.includes('needle')) {
+   *       return undefined;
+   *     }
+   *     const from = Number(previous.attrs['ct:angle']);
+   *     const to = Number(next.attrs['ct:angle']);
+   *     return progress.map(p => ({
+   *       transform: `rotate(${from + (to - from) * p} 100 100)`
+   *     }));
+   *   }
+   * };
+   * ```
+   * @param previous The node in the previous scene
+   * @param next The node in the new scene
+   * @param progress The progress points to give attributes for
+   * @returns One set of attributes per progress point, or nothing.
    */
-  install(chart: ChartHandle, options?: TOptions): void;
+  keyframes?(previous: SceneNode, next: SceneNode, progress: readonly number[]): Keyframes | undefined;
 }
 /**
  * A plugin paired with its options, as {@link withOptions} creates it.
@@ -1477,7 +1639,6 @@ type PluginEntry = ChartPlugin<any> | PluginWithOptions<any>;
  *
  * Without `axes`, layers draw into the whole chart area; the pie layer
  * needs `coordinates: 'polar'`. {@link toScene} takes the same config.
- * @experimental
  */
 interface ChartConfig extends PipelineOptions {
   /**
@@ -1504,14 +1665,12 @@ interface ChartConfig extends PipelineOptions {
  * The part of a {@link ChartConfig} that responsive entries can override:
  * everything but `responsive`, `plugins`, `on` and `renderer`. The
  * matching entries merge over the config in order, shallowly.
- * @experimental
  */
 type ChartOverrides = Partial<Omit<ChartConfig, 'responsive' | 'plugins' | 'on' | 'renderer'>>;
 /**
  * The handle {@link chart} returns: update or remove the chart, and listen
  * to its events. Plugins get the same handle in `install`. The methods
  * other than `destroy` and `emit` return the handle, so calls chain.
- * @experimental
  */
 interface ChartHandle {
   /** The element the chart renders into (undefined in `toScene`). */
@@ -1590,7 +1749,6 @@ interface ChartHandle {
  *   { plugins: [withOptions(lastPoint, { className: 'ct-last' })] }
  * );
  * ```
- * @experimental
  */
 export declare function withOptions<TOptions>(plugin: ChartPlugin<TOptions>, options: TOptions): PluginWithOptions<TOptions>;
 //#endregion
@@ -1623,7 +1781,6 @@ interface LineSeriesOptions {
  * The options of the {@link line} layer. Without them, it draws every
  * series as a smooth line with points and no area, on the first X and Y
  * axis.
- * @experimental
  */
 interface LineLayerOptions extends LineSeriesOptions {
   /** Series to draw, by index or name; default: all series. */
@@ -1694,7 +1851,6 @@ interface LineLayerOptions extends LineSeriesOptions {
  *   ]
  * });
  * ```
- * @experimental
  */
 export declare function line(options?: LineLayerOptions): Layer;
 //#endregion
@@ -1753,21 +1909,20 @@ interface PresetState<TData = unknown, TOptions = unknown, TKind extends string
  * // Areas from now on; the other options stay.
  * chart.setOptions({ showArea: true });
  * ```
- * @experimental
  */
 interface PresetHandle<TOptions> extends ChartHandle {
   /**
    * Changes the options and redraws: they extend the current options, or
    * with `{ replace: true }`, the defaults, dropping the options given
-   * before. Matching responsive options still apply on top. `plugins` and
-   * `on` can't change. Coming from 1.x, `setOptions(options)` is
+   * before. Matching responsive options still apply on top. `plugins`,
+   * `on` and `renderer` can't change. Coming from 1.x, `setOptions(options)` is
    * `update(undefined, options, true)` and
    * `setOptions(options, { replace: true })` is `update(undefined, options)`.
    * @param options The options to change.
    * @param how `replace: true` starts from the defaults instead of the
    * current options.
    */
-  setOptions(options: Omit<TOptions, 'plugins' | 'on'>, how?: {
+  setOptions(options: Omit<TOptions, 'plugins' | 'on' | 'renderer'>, how?: {
     readonly replace?: boolean;
   }): this;
 }
@@ -1800,7 +1955,6 @@ type PresetAxisOptions = Omit<AxisOptions, 'type'> & {
  *   { layers: { above: [targetLine({ value: 1000 })] } }
  * );
  * ```
- * @experimental
  */
 interface PresetLayers {
   /** Layers drawn above the grid and below the chart's series. */
@@ -1811,7 +1965,6 @@ interface PresetLayers {
 /**
  * Responsive options of presets: the 1.x media query pairs, plus container
  * conditions (`container()`). Matching entries extend the options in order.
- * @experimental
  */
 type PresetResponsiveOptions<T> = readonly ResponsiveEntry<T>[];
 //#endregion
@@ -1819,7 +1972,6 @@ type PresetResponsiveOptions<T> = readonly ResponsiveEntry<T>[];
 /**
  * Options of `lineChart`: the 1.x `LineChart` options; axis types may also
  * be v2 axis factories.
- * @experimental
  */
 type LineChartPresetOptions = Omit<LineChartOptions, 'axisX' | 'axisY' | 'plugins' | 'series'> & {
   /** v2 plugins; convert 1.x plugins with `fromLegacyPlugin`. */
@@ -1830,6 +1982,13 @@ type LineChartPresetOptions = Omit<LineChartOptions, 'axisX' | 'axisY' | 'plugin
    * so they see it too.
    */
   readonly on?: PhaseListeners;
+  /**
+   * Turns the scene into output, as `renderer` in the config of
+   * `chart()`: the DOM renderer by default, or `liveDomRenderer()` from
+   * `chartist/live` for a chart that changes in place on updates. It can't
+   * change after the chart is created.
+   */
+  readonly renderer?: Renderer;
   /** Extra layers below or above the chart's lines. */
   readonly layers?: PresetLayers;
   /** Options per series name: only these five apply per series. */
@@ -1860,14 +2019,12 @@ type LinePresetState = PresetState<LineChartData, LineChartPresetOptions, 'line'
  *   toScene(config, { width: 600, height: 300 })
  * );
  * ```
- * @experimental
  */
 export declare function lineChartConfig(data: LineChartData, options?: LineChartPresetOptions): ChartConfig;
 /**
  * Creates a line chart with the 1.x options and output, rendered
  * synchronously. Plugins must be v2 plugins; convert 1.x plugins with
  * `fromLegacyPlugin` from `chartist/compat`.
- * @experimental
  */
 export declare function lineChart(target: string | Element, data: LineChartData, options?: LineChartPresetOptions, responsiveOptions?: PresetResponsiveOptions<LineChartPresetOptions>): PresetHandle<LineChartPresetOptions>;
 //#endregion
@@ -1981,7 +2138,6 @@ export type BarChartEventsTypes = BaseChartEventsTypes<BarChartCreatedEvent, Axe
 /**
  * Options of `barChart`: the 1.x `BarChart` options; axis types may also be
  * v2 axis factories.
- * @experimental
  */
 type BarChartPresetOptions = Omit<BarChartOptions, 'axisX' | 'axisY' | 'plugins' | 'stackMode'> & {
   /** v2 plugins; convert 1.x plugins with `fromLegacyPlugin`. */
@@ -1992,6 +2148,13 @@ type BarChartPresetOptions = Omit<BarChartOptions, 'axisX' | 'axisY' | 'plugins'
    * so they see it too.
    */
   readonly on?: PhaseListeners;
+  /**
+   * Turns the scene into output, as `renderer` in the config of
+   * `chart()`: the DOM renderer by default, or `liveDomRenderer()` from
+   * `chartist/live` for a chart that changes in place on updates. It can't
+   * change after the chart is created.
+   */
+  readonly renderer?: Renderer;
   /** Extra layers below or above the chart's bars. */
   readonly layers?: PresetLayers;
   /**
@@ -2014,14 +2177,12 @@ type BarPresetState = PresetState<BarChartData, BarChartPresetOptions, 'bar'>;
  * options, without a container: the bar layer with its axes, grid and labels, horizontal or stacked as the options say. Pass it to `toScene()` to render
  * the preset chart with another renderer. Responsive options and the
  * inline size style of the root svg are left out; both need a container.
- * @experimental
  */
 export declare function barChartConfig(data: BarChartData, options?: BarChartPresetOptions): ChartConfig;
 /**
  * Creates a bar chart with the 1.x options and output, rendered
  * synchronously. Plugins must be v2 plugins; convert 1.x plugins with
  * `fromLegacyPlugin` from `chartist/compat`.
- * @experimental
  */
 export declare function barChart(target: string | Element, data: BarChartData, options?: BarChartPresetOptions, responsiveOptions?: PresetResponsiveOptions<BarChartPresetOptions>): PresetHandle<BarChartPresetOptions>;
 //#endregion
@@ -2184,7 +2345,6 @@ export type PieChartEventsTypes = BaseChartEventsTypes<PieChartCreatedEvent, Sli
 /**
  * Options of `pieChart`: the 1.x `PieChart` options, with v2 plugins and
  * phase listeners.
- * @experimental
  */
 type PieChartPresetOptions = Omit<PieChartOptions, 'plugins'> & {
   /** v2 plugins; convert 1.x plugins with `fromLegacyPlugin`. */
@@ -2195,6 +2355,13 @@ type PieChartPresetOptions = Omit<PieChartOptions, 'plugins'> & {
    * so they see it too.
    */
   readonly on?: PhaseListeners;
+  /**
+   * Turns the scene into output, as `renderer` in the config of
+   * `chart()`: the DOM renderer by default, or `liveDomRenderer()` from
+   * `chartist/live` for a chart that changes in place on updates. It can't
+   * change after the chart is created.
+   */
+  readonly renderer?: Renderer;
   /** Extra layers below or above the pie's slices, in polar coordinates. */
   readonly layers?: PresetLayers;
 };
@@ -2205,14 +2372,12 @@ type PiePresetState = PresetState<PieChartData, PieChartPresetOptions, 'pie'>;
  * options, without a container: the pie layer with its labels. Pass it to `toScene()` to render
  * the preset chart with another renderer. Responsive options and the
  * inline size style of the root svg are left out; both need a container.
- * @experimental
  */
 export declare function pieChartConfig(data: PieChartData, options?: PieChartPresetOptions): ChartConfig;
 /**
  * Creates a pie or donut chart with the 1.x options and output, rendered
  * synchronously. Plugins must be v2 plugins; convert 1.x plugins with
  * `fromLegacyPlugin` from `chartist/compat`.
- * @experimental
  */
 export declare function pieChart(target: string | Element, data: PieChartData, options?: PieChartPresetOptions, responsiveOptions?: PresetResponsiveOptions<PieChartPresetOptions>): PresetHandle<PieChartPresetOptions>;
 //#endregion
@@ -2339,7 +2504,6 @@ interface LayerContext {
 /**
  * What a layer's `extent` gets: its series as the axes see them, and the
  * ids of the axes it draws on.
- * @experimental
  */
 interface ExtentContext {
   /**
@@ -2358,7 +2522,6 @@ interface ExtentContext {
  * use the same contract: the "Custom layers" guide explains each field
  * and how to write and share a layer.
  * @see https://chartist.dev/docs/custom-layers/
- * @experimental
  */
 interface Layer {
   /** Name used in error messages, e.g. `line`. */
@@ -2439,6 +2602,42 @@ interface Layer {
    * ```
    */
   refine?(node: SceneNode, context: LayerContext): SceneNode | undefined;
+  /**
+   * Gives the keyframes of an update animation for one of the layer's
+   * nodes, for attributes that don't move well number by number, such as
+   * an arc that should turn around its center. A renderer that animates
+   * updates (`smilAnimations()` from `chartist/live`) asks once per update,
+   * never per frame, with the progress points of the chart's easing: 0 is
+   * the previous node, 1 the new one, and points beyond them come from an
+   * easing that overshoots. Plugins with `keyframes` are asked first.
+   * Leave it out to animate the layer's nodes number by number.
+   *
+   * @param previous The node in the previous scene
+   * @param next The node in the new scene
+   * @param context The context this layer's `compose` got for `next`
+   * @param progress The progress points to give attributes for
+   * @returns One set of attributes per progress point, or nothing.
+   *
+   * @example
+   * ```ts
+   * import type { Layer } from 'chartist';
+   *
+   * // A gauge whose needle (its angle in `ct:angle`) turns on an update.
+   * declare const gauge: Layer;
+   * const turningGauge: Layer = {
+   *   ...gauge,
+   *   keyframes: (previous, next, context, progress) => {
+   *     const from = Number(previous.attrs['ct:angle']);
+   *     const to = Number(next.attrs['ct:angle']);
+   *     const { x1, y1, width, height } = context.area;
+   *     return progress.map(p => ({
+   *       transform: `rotate(${from + (to - from) * p} ${x1 + width / 2} ${y1 - height / 2})`
+   *     }));
+   *   }
+   * };
+   * ```
+   */
+  keyframes?(previous: SceneNode, next: SceneNode, context: LayerContext, progress: readonly number[]): Keyframes | undefined;
 }
 /** Options after the `resolve` phase: defaults applied, listeners removed. */
 interface ResolvedConfig {
@@ -2535,27 +2734,61 @@ interface PhaseEvents {
   scene: {
     readonly scene: SceneNode;
   };
-  /** The renderer has written the scene; `output` is what it returned. */
-  render: {
-    readonly scene: SceneNode;
-    readonly output: RenderOutput;
-  };
-  /** The rendered SVG is in the page; touch elements only here. */
-  mount: {
-    readonly scene: SceneNode;
-    readonly output: RenderOutput;
-    /** The rendered element of a scene node, if the renderer has one. */
+  /**
+   * The renderer has applied the scene: created, replaced or changed the
+   * output in place. `output` is what it returned.
+   */
+  render: RenderEvent;
+  /**
+   * The output is in the page; touch elements only here. Return a function
+   * to undo what the listener did: it runs before the next render changes
+   * the output, and on `destroy()`.
+   */
+  mount: RenderEvent & {
+    /**
+     * The rendered element of a scene node, if the renderer has one; for a
+     * node of a `remove` change, the element just taken out of the page.
+     */
     readonly elementOf: (node: SceneNode) => Element | undefined;
+    /**
+     * The timing of the update animation the renderer started, if it
+     * animated this render. Animate what your plugin draws with it, so it
+     * moves in step with the chart.
+     */
+    readonly animation?: UpdateAnimation;
   };
 }
+/**
+ * What the `render` and `mount` events carry about a render: the scene, the
+ * renderer's output, why the chart rendered and what changed.
+ */
+interface RenderEvent {
+  /** The scene the renderer applied. */
+  readonly scene: SceneNode;
+  /** What the renderer returned. */
+  readonly output: RenderOutput;
+  /** Why the chart rendered, e.g. `update` or `resize`. */
+  readonly cause: RenderCause;
+  /** The previous render's scene; absent on the first render. */
+  readonly previous?: SceneNode;
+  /**
+   * What the render did to the output, in document order. When the
+   * renderer changed its output in place (`liveDomRenderer()` from
+   * `chartist/live`), these are its changes; otherwise every node of the
+   * previous scene is removed and every node of the new one added.
+   */
+  readonly changes: readonly SceneChange[];
+}
 /** The name of a pipeline phase, such as `compose`: a key of {@link PhaseEvents}. */
 type PhaseName = keyof PhaseEvents;
 /**
  * What a phase listener returns: a new payload to transform the phase, or
  * nothing to keep it. `compose` listeners may return `null` to drop the
- * node. `render` and `mount` listeners return nothing (they observe).
+ * node. `render` listeners return nothing (they observe). A function a
+ * `mount` listener returns is its cleanup; other values are ignored, so
+ * `() => chart.detach()` stays a valid listener.
  */
-type PhaseResult<K extends PhaseName> = K extends 'render' | 'mount' ? void : PhaseEvents[K] | (K extends 'compose' ? null : never) | undefined | void;
+type PhaseResult<K extends PhaseName> = K extends 'render' ? void : K extends 'mount' ? unknown : PhaseEvents[K] | (K extends 'compose' ? null : never) | undefined | void;
 /**
  * A listener of one phase: gets the phase's payload and may return a new
  * one (see {@link PhaseResult}). Listeners of a phase run in the order they
@@ -2610,7 +2843,6 @@ interface AxisContext {
 /**
  * A range of values on an axis, from `low` to `high`: what a layer reports
  * in {@link Layer.extent}.
- * @experimental
  */
 interface AxisExtent {
   /** The lowest value. */
@@ -2622,7 +2854,6 @@ interface AxisExtent {
  * A positioned axis: ticks, range and projection into px along the axis.
  * An {@link AxisFactory} creates it once the chart area is known; layers
  * read it to place what they draw.
- * @experimental
  */
 interface ScaleAxis {
   /** Which way the axis runs: `x` or `y`. */
@@ -2659,7 +2890,6 @@ interface ScaleAxis {
  * {@link stepAxis}, {@link autoScaleAxis} and {@link fixedScaleAxis} return
  * one; write your own for a scale they don't cover. It goes in the `type`
  * of an axis.
- * @experimental
  */
 interface AxisFactory {
   /**
@@ -2686,7 +2916,6 @@ interface AxisSetup extends Omit<AxisOptions, 'type'> {
 /**
  * An axis of a composed chart, in the list form of {@link cartesianAxes}:
  * an id that layers bind to, a side, a type and the 1.x axis options.
- * @experimental
  */
 interface AxisDefinition extends AxisSetup {
   /**
@@ -2756,7 +2985,6 @@ interface ChartAxes {
  * Axes for a chart's `axes` option, created by {@link cartesianAxes}. The
  * pipeline asks them for the chart area and, after `layout`, to create the
  * axes. Charts without axes don't bundle any of this.
- * @experimental
  */
 interface CartesianAxes {
   /** The config the axes were created from, with the default offsets filled in. */
@@ -2874,6 +3102,11 @@ interface PathContext extends SeriesContext {
   readonly values: NormalizedSeries;
   /** The path as drawn (a copy, safe to change). */
   readonly path: SvgPath;
+  /**
+   * The interpolation the path was drawn with (`lineSmooth`), so the path
+   * can be drawn again through other points, e.g. for update animations.
+   */
+  readonly smoothing: LineInterpolation;
 }
 /**
  * The context of a `slice` node: a pie or donut slice, which is one series
@@ -3043,6 +3276,8 @@ interface BandContext extends NoSeries {
   readonly series?: readonly number[];
   /** The piece's outline as drawn (a copy, safe to change). */
   readonly path: SvgPath;
+  /** The interpolation the edges were drawn with (`lineSmooth`). */
+  readonly smoothing: LineInterpolation;
 }
 /** The attributes of a target label's SVG `text` element. */
 interface TextAttrs {
@@ -3413,7 +3648,6 @@ export declare function node(name: string, attributes?: Record<string, AttrValue
 /**
  * How an SVG text label sits in its label box, as set in the `align`
  * option of {@link axisLabels}.
- * @experimental
  */
 interface LabelAlign {
   /** Aligns the text to the box's left (`start`), center or right (`end`). */
@@ -4331,7 +4565,6 @@ interface Dot$1 {
 /**
  * The options of the {@link pie} layer. Without them, it draws a filled
  * pie from the top, with a label halfway out on each slice.
- * @experimental
  */
 interface PieLayerOptions {
   /** Where the first slice starts, in degrees clockwise from the top. */
@@ -4420,7 +4653,6 @@ export declare function determineAnchorPosition(center: Dot$1, label: Dot$1, dir
  *   className: 'ct-chart-donut'
  * });
  * ```
- * @experimental
  */
 export declare function pie(options?: PieLayerOptions): Layer;
 //#endregion
@@ -4673,7 +4905,6 @@ interface NodeQuery {
  *   }
  * );
  * ```
- * @experimental
  */
 export declare function findAll<R extends NodeRole>(scene: SceneNode, query: NodeQuery & {
   readonly role: R;
@@ -4724,7 +4955,6 @@ export declare function findAll(scene: SceneNode, query?: NodeQuery): SceneNode[
  * });
  * const markup = mapped ? renderToString(mapped) : '';
  * ```
- * @experimental
  */
 export declare function mapNodes(scene: SceneNode, mapper: (current: SceneNode) => SceneNode | null | undefined | void): SceneNode | null;
 //#endregion
@@ -4732,7 +4962,6 @@ export declare function mapNodes(scene: SceneNode, mapper: (current: SceneNode)
 /**
  * What {@link domRenderer} returns from `render()`: the inline SVG it
  * added to the container.
- * @experimental
  */
 interface DomRenderOutput extends RenderOutput {
   /** The chart's `svg` element, in the container. */
@@ -4742,11 +4971,59 @@ interface DomRenderOutput extends RenderOutput {
   /** Takes the SVG out of the container again. */
   readonly remove: () => void;
 }
+/**
+ * Sets one scene attribute on an element as the DOM renderer does: names
+ * with a known prefix (`ct:value`) in their namespace, and `style` through
+ * the CSSOM, which a Content Security Policy allows. For renderers that
+ * change elements they keep.
+ *
+ * @example
+ * ```ts
+ * import { applyAttribute } from 'chartist';
+ *
+ * const point = document.querySelector('.ct-point');
+ * if (point) {
+ *   applyAttribute(point, 'ct:value', 12);
+ *   applyAttribute(point, 'style', 'stroke-width: 12px;');
+ * }
+ * ```
+ * @param element The element to change
+ * @param name The attribute's name, as in a scene node's `attrs`
+ * @param value The attribute's value
+ */
+export declare function applyAttribute(element: Element, name: string, value: string | number): void;
+/** What {@link renderElement} takes besides the node and the document. */
+interface RenderElementOptions {
+  /** Creates the elements in the XHTML namespace, as inside a `foreignObject`. */
+  readonly html?: boolean;
+  /** Called for every node and the element created for it. */
+  readonly created?: (node: SceneNode, element: Element) => void;
+}
+/**
+ * Creates the element tree of a scene node as the DOM renderer does: SVG
+ * elements, HTML elements inside a `foreignObject`, attributes set with
+ * {@link applyAttribute}. For renderers that create elements.
+ *
+ * @example
+ * ```ts
+ * import { node, renderElement } from 'chartist';
+ *
+ * const dot = renderElement(node('circle', { cx: 5, cy: 5, r: 4 }, 'ct-dot'), document);
+ * document.querySelector('svg')?.append(dot);
+ * ```
+ * @param current The node to create
+ * @param document The document to create the elements in
+ * @param options The namespace, and a callback for each created element
+ * @returns The node's element, with its children
+ */
+export declare function renderElement(current: SceneNode, document: Document, options?: RenderElementOptions): Element;
 /**
  * Creates the renderer `chart()` uses by default: it renders scenes as
  * inline SVG into the container, replacing an earlier Chartist SVG there
- * (as 1.x does), and measures text and reads styles for layout in the
- * container, so its CSS applies.
+ * (as 1.x does) on every render, and measures text and reads styles for
+ * layout in the container, so its CSS applies. It ignores the previous
+ * render it gets from a chart's second render on; `liveDomRenderer()`
+ * from `chartist/live` keeps its SVG and changes it instead.
  * Wrap it to change what every render puts on the page.
  *
  * @example
@@ -4772,7 +5049,6 @@ interface DomRenderOutput extends RenderOutput {
  *   renderer
  * });
  * ```
- * @experimental
  */
 export declare function domRenderer(): Renderer<DomRenderOutput>;
 //#endregion
@@ -4790,7 +5066,6 @@ export declare function domRenderer(): Renderer<DomRenderOutput>;
  * // The color of series `c`, the third.
  * export const third = seriesColors[2];
  * ```
- * @experimental
  */
 export declare const seriesColors: readonly string[];
 //#endregion
@@ -4836,7 +5111,6 @@ export declare const seriesColors: readonly string[];
  *   return renderToString(scene);
  * }
  * ```
- * @experimental
  */
 export declare function renderToString(scene: SceneNode): string;
 //#endregion
@@ -4898,7 +5172,6 @@ export declare function renderToString(scene: SceneNode): string;
  * @param target The container element, or a CSS selector for it.
  * @param config The data, axes, layers and the rest of the chart.
  * @returns A handle to update the chart, listen to it or remove it.
- * @experimental
  */
 export declare function chart(target: string | Element, config: ChartConfig): ChartHandle;
 //#endregion
@@ -4979,7 +5252,6 @@ interface SceneSize {
  *
  * export const markup = renderToString(scene);
  * ```
- * @experimental
  */
 export declare function toScene(config: ChartConfig, size: SceneSize): SceneNode;
 //#endregion
@@ -5016,7 +5288,6 @@ export declare function toScene(config: ChartConfig, size: SceneSize): SceneNode
  *   layers: [axisGrid(), line(), axisLabels()]
  * });
  * ```
- * @experimental
  */
 export declare function stepAxis(): AxisFactory;
 /**
@@ -5057,7 +5328,6 @@ export declare function stepAxis(): AxisFactory;
  *   layers: [axisGrid(), line(), axisLabels()]
  * });
  * ```
- * @experimental
  */
 export declare function autoScaleAxis(): AxisFactory;
 /**
@@ -5098,7 +5368,6 @@ export declare function autoScaleAxis(): AxisFactory;
  *   layers: [axisGrid(), line({ showLine: false }), axisLabels()]
  * });
  * ```
- * @experimental
  */
 export declare function fixedScaleAxis(): AxisFactory;
 //#endregion
@@ -5161,7 +5430,6 @@ export declare function fixedScaleAxis(): AxisFactory;
  *   `{ x, y }` form.
  * @param extra `reverseData` and `normalize`, for the list form (the
  *   `{ x, y }` form takes them inline).
- * @experimental
  */
 export declare function cartesianAxes(input: AxesConfig | readonly AxisDefinition[], extra?: Pick<AxesConfig, 'reverseData' | 'normalize'>): CartesianAxes;
 //#endregion
@@ -5185,7 +5453,6 @@ type BandEdgeOption = number | readonly BandEdgeValue[] | string | {
 /**
  * The options of the {@link band} layer: `low` and `high` edges, or a
  * `series` group.
- * @experimental
  */
 interface BandOptions {
   /** The low edge: a constant value, values or a series. */
@@ -5277,7 +5544,6 @@ interface BandOptions {
  *   ]
  * });
  * ```
- * @experimental
  */
 export declare function band(options: BandOptions): Layer;
 //#endregion
@@ -5285,7 +5551,6 @@ export declare function band(options: BandOptions): Layer;
 /**
  * The options of the {@link bar} layer. Without them, it draws the bars of
  * each label side by side, 15 px apart, on the first X and Y axis.
- * @experimental
  */
 interface BarLayerOptions {
   /** Series to draw, by index or name; default: all series. */
@@ -5372,7 +5637,6 @@ interface BarLayerOptions {
  *   className: 'ct-chart-bar'
  * });
  * ```
- * @experimental
  */
 export declare function bar(options?: BarLayerOptions): Layer;
 //#endregion
@@ -5381,7 +5645,6 @@ export declare function bar(options?: BarLayerOptions): Layer;
  * The options of the {@link targetLine} layer: the line's value, its
  * label and class, and the axis it's on. For several lines, add a layer
  * per line.
- * @experimental
  */
 interface TargetLineOptions {
   /**
@@ -5452,7 +5715,6 @@ interface TargetLineOptions {
  *   ]
  * });
  * ```
- * @experimental
  */
 export declare function targetLine(options: TargetLineOptions): Layer;
 //#endregion
@@ -5460,7 +5722,6 @@ export declare function targetLine(options: TargetLineOptions): Layer;
 /**
  * The options of the {@link trendLine} layer. Without them, it draws a
  * trend line for every series, on the first X and Y axis.
- * @experimental
  */
 interface TrendLineOptions {
   /** Series to draw a trend line for, by index or name; default: all series. */
@@ -5521,7 +5782,6 @@ interface TrendLineOptions {
  *   layers: [axisGrid(), line(), trendLine(), axisLabels()]
  * });
  * ```
- * @experimental
  */
 export declare function trendLine(options?: TrendLineOptions): Layer;
 //#endregion
@@ -5540,7 +5800,6 @@ interface AxisLayerClassNames extends AxisClassNames {
 }
 /**
  * The options of {@link axisGrid} and {@link axisLabels}.
- * @experimental
  */
 interface AxisLayerOptions {
   /**
@@ -5554,7 +5813,6 @@ interface AxisLayerOptions {
 /**
  * The options of {@link axisLabels}: those of every axis layer, plus how
  * the labels are drawn.
- * @experimental
  */
 interface AxisLabelsOptions extends AxisLayerOptions {
   /** HTML (`foreignObject`) or SVG `text`; default: the chart's mode. */
@@ -5602,7 +5860,6 @@ interface AxisLabelsOptions extends AxisLayerOptions {
  * ```
  * @param options The axes to draw and their classes; `background` adds a
  *   `rect.ct-grid-background` over the chart area, behind the lines.
- * @experimental
  */
 export declare function axisGrid(options?: AxisLayerOptions & {
   readonly background?: boolean;
@@ -5644,8 +5901,7 @@ export declare function axisGrid(options?: AxisLayerOptions & {
  *   ]
  * });
  * ```
- * @experimental
  */
 export declare function axisLabels(options?: AxisLabelsOptions): Layer;
 //#endregion
-export { type AllPhasesListener, type Area, type AttrValue, type AxesConfig, type AxisContext, type AxisDefinition, type AxisDimension, type AxisExtent, type AxisFactory, type AxisLabelContext, type AxisLabelsOptions, type AxisLayerClassNames, type AxisLayerOptions, type AxisSetup, type AxisSide, type BandContext, type BandEdge, type BandEdgeOption, type BandEdgeValue, type BandOptions, type BarChartPresetOptions, type BarContext, type BarLayerOptions, type BarPresetState, type CartesianAxes, type ChartAxes, type ChartConfig, type ChartData, type ChartEvents, type ChartHandle, type ChartOverrides, type ChartPlugin, type ContainerCondition, type Coordinates, type CustomEventName, type DomRenderOutput, type ExtentContext, type GridContext, index_d_exports as Interpolation, type LabelAlign, type LabelMode, type Layer, type LayerContext, type Layout, type LegacyAxisClass, type LineAttrs, type LineChartPresetOptions, type LineLayerOptions, type LinePresetState, type LineSeriesOptions, type MeasureStyle, type MeasureStyleOptions, type MeasureText, type MeasureTextOptions, type NoSeries, type NodeContext, type NodeMeta, type NodeQuery, type NodeRole, type NodeRoles, type NormalizedChartData, type PathAttrs, type PathContext, type PhaseEvents, type PhaseListener, type PhaseListeners, type PhaseName, type PhaseResult, type PieChartPresetOptions, type PieLabelContext, type PieLayerOptions, type PiePresetState, type PlacedScaleAxis, type PlainNode, type PluginEntry, type PluginWithOptions, type Point, type PointContext, type PreparedData, type PreparedSeries, type PresetAxisOptions, type PresetHandle, type PresetLayers, type PresetResponsiveOptions, type PresetState, type RectAttrs, type RenderOutput, type Renderer, type ResolvedConfig, type ResponsiveCondition, type ResponsiveEntry, type ResponsiveSet, type ResponsiveWatcher, type RoleMeta, type RoleNode, type ScaleAxis, type SceneNode, type SceneNodeFields, type SceneNodeMethods, type SceneSize, type SeriesAttrs, type SeriesContext, type SeriesGroupContext, type SliceContext, type TargetLabelContext, type TargetLineContext, type TargetLineOptions, type TextAttrs, type TextMetrics, type TrendLineContext, type TrendLineOptions, type ValueContext };
+export { type AllPhasesListener, type Area, type AttrValue, type AxesConfig, type AxisContext, type AxisDefinition, type AxisDimension, type AxisExtent, type AxisFactory, type AxisLabelContext, type AxisLabelsOptions, type AxisLayerClassNames, type AxisLayerOptions, type AxisSetup, type AxisSide, type BandContext, type BandEdge, type BandEdgeOption, type BandEdgeValue, type BandOptions, type BarChartPresetOptions, type BarContext, type BarLayerOptions, type BarPresetState, type CartesianAxes, type ChartAxes, type ChartConfig, type ChartData, type ChartEvents, type ChartHandle, type ChartOverrides, type ChartPlugin, type ContainerCondition, type Coordinates, type CustomEventName, type DomRenderOutput, type ExtentContext, type GridContext, index_d_exports as Interpolation, type Keyframes, type LabelAlign, type LabelMode, type Layer, type LayerContext, type Layout, type LegacyAxisClass, type LineAttrs, type LineChartPresetOptions, type LineLayerOptions, type LinePresetState, type LineSeriesOptions, type MeasureStyle, type MeasureStyleOptions, type MeasureText, type MeasureTextOptions, type NoSeries, type NodeContext, type NodeMeta, type NodeQuery, type NodeRole, type NodeRoles, type NormalizedChartData, type PathAttrs, type PathContext, type PhaseEvents, type PhaseListener, type PhaseListeners, type PhaseName, type PhaseResult, type PieChartPresetOptions, type PieLabelContext, type PieLayerOptions, type PiePresetState, type PlacedScaleAxis, type PlainNode, type PluginEntry, type PluginWithOptions, type Point, type PointContext, type PreparedData, type PreparedSeries, type PresetAxisOptions, type PresetHandle, type PresetLayers, type PresetResponsiveOptions, type PresetState, type RectAttrs, type RenderCause, type RenderElementOptions, type RenderEvent, type RenderOutput, type RenderUpdate, type Renderer, type ResolvedConfig, type ResponsiveCondition, type ResponsiveEntry, type ResponsiveSet, type ResponsiveWatcher, type RoleMeta, type RoleNode, type ScaleAxis, type SceneChange, type SceneNode, type SceneNodeFields, type SceneNodeMethods, type SceneSize, type SeriesAttrs, type SeriesContext, type SeriesGroupContext, type SliceContext, type TargetLabelContext, type TargetLineContext, type TargetLineOptions, type TextAttrs, type TextMetrics, type TrendLineContext, type TrendLineOptions, type UpdateAnimation, type ValueContext };