Docs Charts Interval & uncertainty

ErrorBarChart

import { ErrorBarChart } from "@grassroot/charts-react";
 
export default function ErrorBarChartDemo() {
  return (
    <div>
      <ErrorBarChart
        data={[
          {
            id: "identity",
            label: "Identity API",
            x: "Identity",
            y: 118,
            low: 109,
            high: 129,
            color: "var(--accent)",
          },
          {
            id: "catalog",
            label: "Catalog API",
            x: "Catalog",
            y: 146,
            low: 134,
            high: 161,
            color: "var(--vs-success)",
          },
          {
            id: "search",
            label: "Search API",
            x: "Search",
            y: 162,
            low: 148,
            high: 179,
            color: "var(--vs-info)",
          },
          {
            id: "checkout",
            label: "Checkout API",
            x: "Checkout",
            y: 205,
            low: 188,
            high: 224,
            color: "var(--vs-warning)",
          },
          {
            id: "inventory",
            label: "Inventory API",
            x: "Inventory",
            y: 191,
            low: 174,
            high: 211,
            color: "var(--accent)",
          },
          {
            id: "orders",
            label: "Orders API",
            x: "Orders",
            y: 174,
            low: 159,
            high: 192,
            color: "var(--vs-info)",
          },
          {
            id: "payments",
            label: "Payments API",
            x: "Payments",
            y: 238,
            low: 216,
            high: 267,
            color: "var(--vs-error)",
          },
          {
            id: "notifications",
            label: "Notifications API",
            x: "Notify",
            y: 154,
            low: 139,
            high: 171,
            color: "var(--vs-neutral-400)",
          },
        ]}
        ariaLabel="P95 API latency in milliseconds with 95% confidence intervals for eight checkout-path services, July 2026" />
    </div>
  );
}

<script setup lang="ts">
import { ErrorBarChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <ErrorBarChart
    :data="[
      {
        id: 'identity',
        label: 'Identity API',
        x: 'Identity',
        y: 118,
        low: 109,
        high: 129,
        color: 'var(--accent)',
      },
      {
        id: 'catalog',
        label: 'Catalog API',
        x: 'Catalog',
        y: 146,
        low: 134,
        high: 161,
        color: 'var(--vs-success)',
      },
      {
        id: 'search',
        label: 'Search API',
        x: 'Search',
        y: 162,
        low: 148,
        high: 179,
        color: 'var(--vs-info)',
      },
      {
        id: 'checkout',
        label: 'Checkout API',
        x: 'Checkout',
        y: 205,
        low: 188,
        high: 224,
        color: 'var(--vs-warning)',
      },
      {
        id: 'inventory',
        label: 'Inventory API',
        x: 'Inventory',
        y: 191,
        low: 174,
        high: 211,
        color: 'var(--accent)',
      },
      {
        id: 'orders',
        label: 'Orders API',
        x: 'Orders',
        y: 174,
        low: 159,
        high: 192,
        color: 'var(--vs-info)',
      },
      {
        id: 'payments',
        label: 'Payments API',
        x: 'Payments',
        y: 238,
        low: 216,
        high: 267,
        color: 'var(--vs-error)',
      },
      {
        id: 'notifications',
        label: 'Notifications API',
        x: 'Notify',
        y: 154,
        low: 139,
        high: 171,
        color: 'var(--vs-neutral-400)',
      },
    ]"
    aria-label="P95 API latency in milliseconds with 95% confidence intervals for eight checkout-path services, July 2026" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootErrorBarChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-error-bar-chart-chart-demo",
  standalone: true,
  imports: [GrassrootErrorBarChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-error-bar-chart
    [data]="[
      {
        id: 'identity',
        label: 'Identity API',
        x: 'Identity',
        y: 118,
        low: 109,
        high: 129,
        color: 'var(--accent)',
      },
      {
        id: 'catalog',
        label: 'Catalog API',
        x: 'Catalog',
        y: 146,
        low: 134,
        high: 161,
        color: 'var(--vs-success)',
      },
      {
        id: 'search',
        label: 'Search API',
        x: 'Search',
        y: 162,
        low: 148,
        high: 179,
        color: 'var(--vs-info)',
      },
      {
        id: 'checkout',
        label: 'Checkout API',
        x: 'Checkout',
        y: 205,
        low: 188,
        high: 224,
        color: 'var(--vs-warning)',
      },
      {
        id: 'inventory',
        label: 'Inventory API',
        x: 'Inventory',
        y: 191,
        low: 174,
        high: 211,
        color: 'var(--accent)',
      },
      {
        id: 'orders',
        label: 'Orders API',
        x: 'Orders',
        y: 174,
        low: 159,
        high: 192,
        color: 'var(--vs-info)',
      },
      {
        id: 'payments',
        label: 'Payments API',
        x: 'Payments',
        y: 238,
        low: 216,
        high: 267,
        color: 'var(--vs-error)',
      },
      {
        id: 'notifications',
        label: 'Notifications API',
        x: 'Notify',
        y: 154,
        low: 139,
        high: 171,
        color: 'var(--vs-neutral-400)',
      },
    ]"
    ariaLabel="P95 API latency in milliseconds with 95% confidence intervals for eight checkout-path services, July 2026"
  />`,
})
export class ErrorBarChartDemoComponent {
}
 
export default ErrorBarChartDemoComponent;

<script lang="ts">
  import { ErrorBarChart } from "@grassroot/charts-svelte";
 
  const intervals = [
    {
      id: "identity",
      label: "Identity API",
      x: "Identity",
      y: 118,
      low: 109,
      high: 129,
      color: "var(--accent)",
    },
    {
      id: "catalog",
      label: "Catalog API",
      x: "Catalog",
      y: 146,
      low: 134,
      high: 161,
      color: "var(--vs-success)",
    },
    {
      id: "checkout",
      label: "Checkout API",
      x: "Checkout",
      y: 205,
      low: 188,
      high: 224,
      color: "var(--vs-warning)",
    },
    {
      id: "payments",
      label: "Payments API",
      x: "Payments",
      y: 238,
      low: 216,
      high: 267,
      color: "var(--vs-error)",
    },
    {
      id: "orders",
      label: "Orders API",
      x: "Orders",
      y: 174,
      low: 159,
      high: 192,
      color: "var(--vs-info)",
    },
  ];
</script>
 
<ErrorBarChart
  data={[
    {
      id: "identity",
      label: "Identity API",
      x: "Identity",
      y: 118,
      low: 109,
      high: 129,
      color: "var(--accent)",
    },
    {
      id: "catalog",
      label: "Catalog API",
      x: "Catalog",
      y: 146,
      low: 134,
      high: 161,
      color: "var(--vs-success)",
    },
    {
      id: "search",
      label: "Search API",
      x: "Search",
      y: 162,
      low: 148,
      high: 179,
      color: "var(--vs-info)",
    },
    {
      id: "checkout",
      label: "Checkout API",
      x: "Checkout",
      y: 205,
      low: 188,
      high: 224,
      color: "var(--vs-warning)",
    },
    {
      id: "inventory",
      label: "Inventory API",
      x: "Inventory",
      y: 191,
      low: 174,
      high: 211,
      color: "var(--accent)",
    },
    {
      id: "orders",
      label: "Orders API",
      x: "Orders",
      y: 174,
      low: 159,
      high: 192,
      color: "var(--vs-info)",
    },
    {
      id: "payments",
      label: "Payments API",
      x: "Payments",
      y: 238,
      low: 216,
      high: 267,
      color: "var(--vs-error)",
    },
    {
      id: "notifications",
      label: "Notifications API",
      x: "Notify",
      y: 154,
      low: 139,
      high: 171,
      color: "var(--vs-neutral-400)",
    },
  ]}
  ariaLabel="P95 API latency in milliseconds with 95% confidence intervals for eight checkout-path services, July 2026" />

/** @jsxImportSource solid-js */
import { ErrorBarChart } from "@grassroot/charts-solid";
 
export default function ErrorBarChartDemo() {
  return (
    <ErrorBarChart
      data={[
        {
          id: "identity",
          label: "Identity API",
          x: "Identity",
          y: 118,
          low: 109,
          high: 129,
          color: "var(--accent)",
        },
        {
          id: "catalog",
          label: "Catalog API",
          x: "Catalog",
          y: 146,
          low: 134,
          high: 161,
          color: "var(--vs-success)",
        },
        {
          id: "search",
          label: "Search API",
          x: "Search",
          y: 162,
          low: 148,
          high: 179,
          color: "var(--vs-info)",
        },
        {
          id: "checkout",
          label: "Checkout API",
          x: "Checkout",
          y: 205,
          low: 188,
          high: 224,
          color: "var(--vs-warning)",
        },
        {
          id: "inventory",
          label: "Inventory API",
          x: "Inventory",
          y: 191,
          low: 174,
          high: 211,
          color: "var(--accent)",
        },
        {
          id: "orders",
          label: "Orders API",
          x: "Orders",
          y: 174,
          low: 159,
          high: 192,
          color: "var(--vs-info)",
        },
        {
          id: "payments",
          label: "Payments API",
          x: "Payments",
          y: 238,
          low: 216,
          high: 267,
          color: "var(--vs-error)",
        },
        {
          id: "notifications",
          label: "Notifications API",
          x: "Notify",
          y: 154,
          low: 139,
          high: 171,
          color: "var(--vs-neutral-400)",
        },
      ]}
      ariaLabel="P95 API latency in milliseconds with 95% confidence intervals for eight checkout-path services, July 2026" />
  );
}

Installation

API Reference

Import

import { ErrorBarChart } from "@grassroot/charts-react";

Props

Prop

Type

Default

Requirement

Description

data

readonly ErrorBarDatum[]

—

required

—

legend

boolean | import("@grassroot/chart-spec").LegendConfig | undefined

—

optional

—

animation

boolean | import("./base").ExpandedChartAnimationConfig | undefined

—

optional

—

onHiddenSeriesChange

((ids: readonly string[]) => void) | undefined

—

optional

—

onActiveDatumChange

((id: string | null) => void) | undefined

—

optional

—

renderer

ChartRenderer | undefined

—

optional

—

className

string | undefined

—

optional

—

theme

import("@grassroot/theme").PartialChartTheme | undefined

—

optional

—

title

string | undefined

—

optional

—

description

string | undefined

—

optional

—

ariaLabel

string | undefined

—

optional

—

keyboardNavigation

boolean | undefined

—

optional

—

width

number | undefined

—

optional

—

Prop: data
Type: readonly ErrorBarDatum[]
Default: —
Requirement: required
Description: —

Prop: legend
Type: boolean | import("@grassroot/chart-spec").LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: boolean | import("./base").ExpandedChartAnimationConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: onHiddenSeriesChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: onActiveDatumChange
Type: ((id: string | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional
Description: —

Prop: className
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: theme
Type: import("@grassroot/theme").PartialChartTheme | undefined
Default: —
Requirement: optional
Description: —

Prop: title
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: description
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: keyboardNavigation
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: width
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: height
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional
Description: —

Prop: rendererStrategy
Type: Partial<import("@grassroot/core").ChartRendererStrategy> | undefined
Default: —
Requirement: optional
Description: —

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: —
Requirement: optional
Description: —

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: Gates every pointer/keyboard interaction the shell owns (hit-test on pointer move, focus-to-first, arrow navigation, Escape) and, with `keyboardNavigation`, whether the plot surface is focusable at all.

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.

Prop: speed
Type: number | undefined
Default: —
Requirement: optional
Description: Playback-speed multiplier for entrance/ambient motion.

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional
Description: How long a dataset change tweens, in milliseconds.

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional
Description: Changing this value replays the entrance animation.

Events

Event	Payload
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { ErrorBarChart } from "@grassroot/charts-vue";

Props

Prop

Type

Default

Requirement

className

string | undefined

—

optional

gpuBackend

"auto" | "webgpu" | "webgl2" | undefined

—

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

showGrid

boolean | undefined

—

optional

legend

boolean | LegendConfig | undefined

false

optional

animation

ChartAnimationInput | undefined

—

optional

interactive

boolean | undefined

true

optional

keyboardNavigation

boolean | undefined

true

optional

hiddenSeries

readonly string[] | undefined

—

optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: gpuBackend
Type: "auto" | "webgpu" | "webgl2" | undefined
Default: —
Requirement: optional

Prop: width
Type: number | undefined
Default: —
Requirement: optional

Prop: height
Type: number | undefined
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy> | undefined
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput | undefined
Default: —
Requirement: optional

Prop: interactive
Type: boolean | undefined
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean | undefined
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: () => []
Requirement: optional

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: speed
Type: number | undefined
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme | undefined
Default: —
Requirement: optional

Prop: title
Type: string | undefined
Default: —
Requirement: optional

Prop: description
Type: string | undefined
Default: —
Requirement: optional

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional

Prop: data
Type: readonly ErrorBarDatum[]
Default: —
Requirement: required

Events

Event	Payload
`hiddenSeriesChange`	`[ids: readonly string[]]`
`activeDatumChange`	`[id: string \| null]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootErrorBarChart } from "@grassroot/charts-angular";

Props

Prop

Type

Default

Requirement

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

animation

ChartAnimationInput

—

optional

interactive

boolean

true

optional

keyboardNavigation

boolean

true

optional

legend

boolean | LegendConfig

—

optional

hiddenSeries

readonly string[]

—

optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: []
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: null
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: data
Type: readonly ErrorBarDatum[]
Default: —
Requirement: required

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: className
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`

Content regions

dataSummary
default

Import

import { ErrorBarChart } from "@grassroot/charts-svelte";

Props

Prop

Type

Default

Requirement

data

readonly ErrorBarDatum[]

—

required

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

class

string

—

optional

style

string

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

showGrid

boolean

—

optional

legend

boolean | LegendConfig

false

optional

Prop: data
Type: readonly ErrorBarDatum[]
Default: —
Requirement: required

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: string
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`

Content regions

children
dataSummary

Import

import { ErrorBarChart } from "@grassroot/charts-solid";

Props

Prop

Type

Default

Requirement

data

readonly ErrorBarDatum[]

—

required

onActiveDatumChange

(id: string | null) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

class

string

—

optional

style

JSX.CSSProperties

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

"auto"

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

showGrid

boolean

false

optional

legend

boolean | LegendConfig

—

optional

Prop: data
Type: readonly ErrorBarDatum[]
Default: —
Requirement: required

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: JSX.CSSProperties
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: "auto"
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: false
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onActiveDatumChange`	`(id: string \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary