Docs Charts Comparison & rank

BumpChart

import { useState } from "react";
import { BumpChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";
 
const MARKS = [
  { value: "line" as const, label: "Lines" },
  { value: "area" as const, label: "Areas" },
];
 
export default function BumpChartDemo() {
  const [mark, setMark] = useState<(typeof MARKS)[number]["value"]>("line");
  return (
    <div>
      <VariantToggle label="Mark" options={MARKS} value={mark} onChange={setMark} />
      <BumpChart
        mark={mark}
        data={[
          {
            label: "Northstar",
            ranks: [
              3,
              2,
              1,
              1,
              2,
              1,
              1,
              2,
            ],
          },
          {
            label: "Pioneer",
            ranks: [
              1,
              1,
              2,
              3,
              3,
              4,
              3,
              3,
            ],
          },
          {
            label: "Atlas",
            ranks: [
              2,
              3,
              3,
              2,
              1,
              2,
              2,
              1,
            ],
          },
          {
            label: "Relay",
            ranks: [
              4,
              4,
              5,
              4,
              4,
              3,
              4,
              4,
            ],
          },
          {
            label: "Harbor",
            ranks: [
              5,
              5,
              4,
              5,
              5,
              6,
              5,
              6,
            ],
          },
          {
            label: "Quicksilver",
            ranks: [
              6,
              6,
              6,
              6,
              6,
              5,
              6,
              5,
            ],
          },
          {
            label: "Parceline",
            ranks: [
              7,
              8,
              7,
              8,
              7,
              7,
              8,
              7,
            ],
          },
          {
            label: "Metro",
            ranks: [
              8,
              7,
              8,
              7,
              8,
              8,
              7,
              8,
            ],
          },
        ]}
        labels={[
          "Q1 2025",
          "Q2 2025",
          "Q3 2025",
          "Q4 2025",
          "Q1 2026",
          "Q2 2026",
          "Q3 2026",
          "Q4 2026",
        ]}
        ariaLabel="Quarterly customer-satisfaction rank for eight parcel carriers, 2025 to 2026" />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { BumpChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";
const mark = ref<"line" | "area">("line");
const marks = [
  { value: "line", label: "Lines" },
  { value: "area", label: "Areas" },
];
</script>
 
<template>
  <div>
    <VariantToggle v-model="mark" label="Mark" :options="marks" />
    <BumpChart
      :mark="mark"
      :data="[
        {
          label: 'Northstar',
          ranks: [
            3,
            2,
            1,
            1,
            2,
            1,
            1,
            2,
          ],
        },
        {
          label: 'Pioneer',
          ranks: [
            1,
            1,
            2,
            3,
            3,
            4,
            3,
            3,
          ],
        },
        {
          label: 'Atlas',
          ranks: [
            2,
            3,
            3,
            2,
            1,
            2,
            2,
            1,
          ],
        },
        {
          label: 'Relay',
          ranks: [
            4,
            4,
            5,
            4,
            4,
            3,
            4,
            4,
          ],
        },
        {
          label: 'Harbor',
          ranks: [
            5,
            5,
            4,
            5,
            5,
            6,
            5,
            6,
          ],
        },
        {
          label: 'Quicksilver',
          ranks: [
            6,
            6,
            6,
            6,
            6,
            5,
            6,
            5,
          ],
        },
        {
          label: 'Parceline',
          ranks: [
            7,
            8,
            7,
            8,
            7,
            7,
            8,
            7,
          ],
        },
        {
          label: 'Metro',
          ranks: [
            8,
            7,
            8,
            7,
            8,
            8,
            7,
            8,
          ],
        },
      ]"
      :labels="[
        'Q1 2025',
        'Q2 2025',
        'Q3 2025',
        'Q4 2025',
        'Q1 2026',
        'Q2 2026',
        'Q3 2026',
        'Q4 2026',
      ]"
      aria-label="Quarterly customer-satisfaction rank for eight parcel carriers, 2025 to 2026" />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootBumpChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";
 
@Component({
  selector: "app-bump-chart-chart-demo",
  standalone: true,
  imports: [GrassrootBumpChart, VariantToggleComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<app-variant-toggle
      label="Mark"
      [options]="marks"
      [value]="mark()"
      (valueChange)="setMark($event)"
    /><grassroot-bump-chart
    [mark]="mark()"
    [data]="[
      {
        label: 'Northstar',
        ranks: [
          3,
          2,
          1,
          1,
          2,
          1,
          1,
          2,
        ],
      },
      {
        label: 'Pioneer',
        ranks: [
          1,
          1,
          2,
          3,
          3,
          4,
          3,
          3,
        ],
      },
      {
        label: 'Atlas',
        ranks: [
          2,
          3,
          3,
          2,
          1,
          2,
          2,
          1,
        ],
      },
      {
        label: 'Relay',
        ranks: [
          4,
          4,
          5,
          4,
          4,
          3,
          4,
          4,
        ],
      },
      {
        label: 'Harbor',
        ranks: [
          5,
          5,
          4,
          5,
          5,
          6,
          5,
          6,
        ],
      },
      {
        label: 'Quicksilver',
        ranks: [
          6,
          6,
          6,
          6,
          6,
          5,
          6,
          5,
        ],
      },
      {
        label: 'Parceline',
        ranks: [
          7,
          8,
          7,
          8,
          7,
          7,
          8,
          7,
        ],
      },
      {
        label: 'Metro',
        ranks: [
          8,
          7,
          8,
          7,
          8,
          8,
          7,
          8,
        ],
      },
    ]"
    [labels]="[
      'Q1 2025',
      'Q2 2025',
      'Q3 2025',
      'Q4 2025',
      'Q1 2026',
      'Q2 2026',
      'Q3 2026',
      'Q4 2026',
    ]"
    ariaLabel="Quarterly customer-satisfaction rank for eight parcel carriers, 2025 to 2026"
  />`,
})
export class BumpChartDemoComponent {
  readonly mark = signal<"line" | "area">("line");
  readonly marks = [
    { value: "line", label: "Lines" },
    { value: "area", label: "Areas" },
  ] as const;
  setMark(value: string): void {
    if (value === "line" || value === "area") this.mark.set(value);
  }
}
 
export default BumpChartDemoComponent;

<script lang="ts">
  import { BumpChart } from "@grassroot/charts-svelte";
  import VariantToggle from "./VariantToggle.svelte";
  let mark = $state<"line" | "area">("line");
  const marks = [
    { value: "line", label: "Lines" },
    { value: "area", label: "Areas" },
  ];
</script>
 
<div>
  <VariantToggle
    label="Mark"
    options={marks}
    value={mark}
    onchange={(value) => (mark = value as typeof mark)}
  />
  <BumpChart
    {mark}
    data={[
      {
        label: "Northstar",
        ranks: [
          3,
          2,
          1,
          1,
          2,
          1,
          1,
          2,
        ],
      },
      {
        label: "Pioneer",
        ranks: [
          1,
          1,
          2,
          3,
          3,
          4,
          3,
          3,
        ],
      },
      {
        label: "Atlas",
        ranks: [
          2,
          3,
          3,
          2,
          1,
          2,
          2,
          1,
        ],
      },
      {
        label: "Relay",
        ranks: [
          4,
          4,
          5,
          4,
          4,
          3,
          4,
          4,
        ],
      },
      {
        label: "Harbor",
        ranks: [
          5,
          5,
          4,
          5,
          5,
          6,
          5,
          6,
        ],
      },
      {
        label: "Quicksilver",
        ranks: [
          6,
          6,
          6,
          6,
          6,
          5,
          6,
          5,
        ],
      },
      {
        label: "Parceline",
        ranks: [
          7,
          8,
          7,
          8,
          7,
          7,
          8,
          7,
        ],
      },
      {
        label: "Metro",
        ranks: [
          8,
          7,
          8,
          7,
          8,
          8,
          7,
          8,
        ],
      },
    ]}
    labels={[
      "Q1 2025",
      "Q2 2025",
      "Q3 2025",
      "Q4 2025",
      "Q1 2026",
      "Q2 2026",
      "Q3 2026",
      "Q4 2026",
    ]}
    ariaLabel="Quarterly customer-satisfaction rank for eight parcel carriers, 2025 to 2026" />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { BumpChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";
 
export default function BumpChartDemo() {
  const [mark, setMark] = createSignal<"line" | "area">("line");
  const marks = [
    { value: "line", label: "Lines" },
    { value: "area", label: "Areas" },
  ];
  return (
    <div>
      <VariantToggle
        label="Mark"
        options={marks}
        value={mark}
        onChange={(value) => setMark(value as "line" | "area")}
      />
      <BumpChart
        mark={mark()}
        data={[
          {
            label: "Northstar",
            ranks: [
              3,
              2,
              1,
              1,
              2,
              1,
              1,
              2,
            ],
          },
          {
            label: "Pioneer",
            ranks: [
              1,
              1,
              2,
              3,
              3,
              4,
              3,
              3,
            ],
          },
          {
            label: "Atlas",
            ranks: [
              2,
              3,
              3,
              2,
              1,
              2,
              2,
              1,
            ],
          },
          {
            label: "Relay",
            ranks: [
              4,
              4,
              5,
              4,
              4,
              3,
              4,
              4,
            ],
          },
          {
            label: "Harbor",
            ranks: [
              5,
              5,
              4,
              5,
              5,
              6,
              5,
              6,
            ],
          },
          {
            label: "Quicksilver",
            ranks: [
              6,
              6,
              6,
              6,
              6,
              5,
              6,
              5,
            ],
          },
          {
            label: "Parceline",
            ranks: [
              7,
              8,
              7,
              8,
              7,
              7,
              8,
              7,
            ],
          },
          {
            label: "Metro",
            ranks: [
              8,
              7,
              8,
              7,
              8,
              8,
              7,
              8,
            ],
          },
        ]}
        labels={[
          "Q1 2025",
          "Q2 2025",
          "Q3 2025",
          "Q4 2025",
          "Q1 2026",
          "Q2 2026",
          "Q3 2026",
          "Q4 2026",
        ]}
        ariaLabel="Quarterly customer-satisfaction rank for eight parcel carriers, 2025 to 2026" />
    </div>
  );
}

Installation

API Reference

Import

import { useState } from "react";
import { BumpChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";

Props

Prop

Type

Default

Requirement

Description

data

readonly BumpDatum[]

—

required

—

labels

readonly string[] | undefined

—

optional

—

mark

"area" | "line" | undefined

—

optional

—

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

—

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

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

Prop: mark
Type: "area" | "line" | undefined
Default: —
Requirement: optional
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 { ref } from "vue";
import { BumpChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.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 BumpDatum[]
Default: —
Requirement: required

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

Prop: mark
Type: "line" | "area" | undefined
Default: —
Requirement: optional

Events

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

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootBumpChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";

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 BumpDatum[]
Default: —
Requirement: required

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

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

Prop: mark
Type: BumpChartOptions["mark"]
Default: —
Requirement: optional

Events

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

Content regions

dataSummary
default

Import

import { BumpChart } from "@grassroot/charts-svelte";
import VariantToggle from "./VariantToggle.svelte";

Props

Prop

Type

Default

Requirement

data

readonly BumpDatum[]

—

required

labels

readonly string[]

—

optional

mark

BumpChartOptions["mark"]

—

optional

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

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

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

Prop: mark
Type: BumpChartOptions["mark"]
Default: —
Requirement: optional

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 { createSignal } from "solid-js";
import { BumpChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";

Props

Prop

Type

Default

Requirement

data

readonly BumpDatum[]

—

required

labels

readonly string[]

—

optional

mark

BumpChartOptions["mark"]

—

optional

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

—

optional

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

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

Prop: mark
Type: BumpChartOptions["mark"]
Default: —
Requirement: optional

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