Docs Charts Other

SmithChart

import { SmithChart } from "@grassroot/charts-react";
 
const smithData = [
  {
    id: "Antenna",
    real: 0.34,
    imaginary: -0.62,
    label: "50 MHz",
  },
  {
    id: "Antenna",
    real: 0.41,
    imaginary: -0.51,
    label: "75 MHz",
  },
  {
    id: "Antenna",
    real: 0.48,
    imaginary: -0.38,
    label: "100 MHz",
  },
  {
    id: "Antenna",
    real: 0.58,
    imaginary: -0.27,
    label: "150 MHz",
  },
  {
    id: "Antenna",
    real: 0.72,
    imaginary: -0.12,
    label: "250 MHz",
  },
  {
    id: "Antenna",
    real: 0.86,
    imaginary: -0.02,
    label: "350 MHz",
  },
  {
    id: "Antenna",
    real: 1.03,
    imaginary: 0.08,
    label: "500 MHz",
  },
  {
    id: "Antenna",
    real: 1.18,
    imaginary: 0.18,
    label: "750 MHz",
  },
  {
    id: "Antenna",
    real: 1.38,
    imaginary: 0.31,
    label: "1 GHz",
  },
  {
    id: "Antenna",
    real: 1.54,
    imaginary: 0.42,
    label: "1.5 GHz",
  },
  {
    id: "Antenna",
    real: 1.76,
    imaginary: 0.58,
    label: "2 GHz",
  },
  {
    id: "Antenna",
    real: 1.94,
    imaginary: 0.71,
    label: "3 GHz",
  },
  {
    id: "Antenna",
    real: 2.12,
    imaginary: 0.84,
    label: "4 GHz",
  },
  {
    id: "Antenna",
    real: 2.28,
    imaginary: 0.96,
    label: "5 GHz",
  },
  {
    id: "Antenna",
    real: 2.41,
    imaginary: 1.08,
    label: "6 GHz",
  },
];
 
export default function SmithChartDemo() {
  return (
    <SmithChart
      ariaLabel="Antenna impedance sweep, 50 MHz to 6 GHz, July 2026"
      data={smithData}
      title="Antenna impedance sweep, 50 MHz to 6 GHz, July 2026"
      legend />
  );
}

<script setup lang="ts">
import { SmithChart } from "@grassroot/charts-vue";
 
const smithData = [
  {
    id: "50-mhz",
    real: 0.34,
    imaginary: -0.62,
    label: "50 MHz",
  },
  {
    id: "75-mhz",
    real: 0.41,
    imaginary: -0.51,
    label: "75 MHz",
  },
  {
    id: "100-mhz",
    real: 0.48,
    imaginary: -0.38,
    label: "100 MHz",
  },
  {
    id: "150-mhz",
    real: 0.58,
    imaginary: -0.27,
    label: "150 MHz",
  },
  {
    id: "250-mhz",
    real: 0.72,
    imaginary: -0.12,
    label: "250 MHz",
  },
  {
    id: "350-mhz",
    real: 0.86,
    imaginary: -0.02,
    label: "350 MHz",
  },
  {
    id: "500-mhz",
    real: 1.03,
    imaginary: 0.08,
    label: "500 MHz",
  },
  {
    id: "750-mhz",
    real: 1.18,
    imaginary: 0.18,
    label: "750 MHz",
  },
  {
    id: "1-ghz",
    real: 1.38,
    imaginary: 0.31,
    label: "1 GHz",
  },
  {
    id: "1-5-ghz",
    real: 1.54,
    imaginary: 0.42,
    label: "1.5 GHz",
  },
  {
    id: "2-ghz",
    real: 1.76,
    imaginary: 0.58,
    label: "2 GHz",
  },
  {
    id: "3-ghz",
    real: 1.94,
    imaginary: 0.71,
    label: "3 GHz",
  },
  {
    id: "4-ghz",
    real: 2.12,
    imaginary: 0.84,
    label: "4 GHz",
  },
  {
    id: "5-ghz",
    real: 2.28,
    imaginary: 0.96,
    label: "5 GHz",
  },
  {
    id: "6-ghz",
    real: 2.41,
    imaginary: 1.08,
    label: "6 GHz",
  },
];
</script>
 
<template>
  <SmithChart
    aria-label="Antenna impedance sweep, 50 MHz to 6 GHz, July 2026"
    :data="smithData"
    title="Antenna impedance sweep, 50 MHz to 6 GHz, July 2026"
    legend />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootSmithChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-smith-chart-chart-demo",
  standalone: true,
  imports: [GrassrootSmithChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-smith-chart
    [ariaLabel]="'Antenna impedance sweep, 50 MHz to 6 GHz, July 2026'"
    [data]="smithData"
    title="Antenna impedance sweep, 50 MHz to 6 GHz, July 2026"
    [legend]="true"
  />`,
})
export class SmithChartDemoComponent {
  readonly smithData = [
    {
      id: "50-mhz",
      real: 0.34,
      imaginary: -0.62,
      label: "50 MHz",
    },
    {
      id: "75-mhz",
      real: 0.41,
      imaginary: -0.51,
      label: "75 MHz",
    },
    {
      id: "100-mhz",
      real: 0.48,
      imaginary: -0.38,
      label: "100 MHz",
    },
    {
      id: "150-mhz",
      real: 0.58,
      imaginary: -0.27,
      label: "150 MHz",
    },
    {
      id: "250-mhz",
      real: 0.72,
      imaginary: -0.12,
      label: "250 MHz",
    },
    {
      id: "350-mhz",
      real: 0.86,
      imaginary: -0.02,
      label: "350 MHz",
    },
    {
      id: "500-mhz",
      real: 1.03,
      imaginary: 0.08,
      label: "500 MHz",
    },
    {
      id: "750-mhz",
      real: 1.18,
      imaginary: 0.18,
      label: "750 MHz",
    },
    {
      id: "1-ghz",
      real: 1.38,
      imaginary: 0.31,
      label: "1 GHz",
    },
    {
      id: "1-5-ghz",
      real: 1.54,
      imaginary: 0.42,
      label: "1.5 GHz",
    },
    {
      id: "2-ghz",
      real: 1.76,
      imaginary: 0.58,
      label: "2 GHz",
    },
    {
      id: "3-ghz",
      real: 1.94,
      imaginary: 0.71,
      label: "3 GHz",
    },
    {
      id: "4-ghz",
      real: 2.12,
      imaginary: 0.84,
      label: "4 GHz",
    },
    {
      id: "5-ghz",
      real: 2.28,
      imaginary: 0.96,
      label: "5 GHz",
    },
    {
      id: "6-ghz",
      real: 2.41,
      imaginary: 1.08,
      label: "6 GHz",
    },
  ];
}
 
export default SmithChartDemoComponent;

<script lang="ts">
  import { SmithChart } from "@grassroot/charts-svelte";
 
  const smithData = [
    {
      id: "50-mhz",
      real: 0.34,
      imaginary: -0.62,
      label: "50 MHz",
    },
    {
      id: "75-mhz",
      real: 0.41,
      imaginary: -0.51,
      label: "75 MHz",
    },
    {
      id: "100-mhz",
      real: 0.48,
      imaginary: -0.38,
      label: "100 MHz",
    },
    {
      id: "150-mhz",
      real: 0.58,
      imaginary: -0.27,
      label: "150 MHz",
    },
    {
      id: "250-mhz",
      real: 0.72,
      imaginary: -0.12,
      label: "250 MHz",
    },
    {
      id: "350-mhz",
      real: 0.86,
      imaginary: -0.02,
      label: "350 MHz",
    },
    {
      id: "500-mhz",
      real: 1.03,
      imaginary: 0.08,
      label: "500 MHz",
    },
    {
      id: "750-mhz",
      real: 1.18,
      imaginary: 0.18,
      label: "750 MHz",
    },
    {
      id: "1-ghz",
      real: 1.38,
      imaginary: 0.31,
      label: "1 GHz",
    },
    {
      id: "1-5-ghz",
      real: 1.54,
      imaginary: 0.42,
      label: "1.5 GHz",
    },
    {
      id: "2-ghz",
      real: 1.76,
      imaginary: 0.58,
      label: "2 GHz",
    },
    {
      id: "3-ghz",
      real: 1.94,
      imaginary: 0.71,
      label: "3 GHz",
    },
    {
      id: "4-ghz",
      real: 2.12,
      imaginary: 0.84,
      label: "4 GHz",
    },
    {
      id: "5-ghz",
      real: 2.28,
      imaginary: 0.96,
      label: "5 GHz",
    },
    {
      id: "6-ghz",
      real: 2.41,
      imaginary: 1.08,
      label: "6 GHz",
    },
  ];
</script>
 
<SmithChart
  ariaLabel="Antenna impedance sweep, 50 MHz to 6 GHz, July 2026"
  data={smithData}
  title="Antenna impedance sweep, 50 MHz to 6 GHz, July 2026"
  legend />

/** @jsxImportSource solid-js */
import { SmithChart } from "@grassroot/charts-solid";
 
const smithData = [
  {
    id: "50-mhz",
    real: 0.34,
    imaginary: -0.62,
    label: "50 MHz",
  },
  {
    id: "75-mhz",
    real: 0.41,
    imaginary: -0.51,
    label: "75 MHz",
  },
  {
    id: "100-mhz",
    real: 0.48,
    imaginary: -0.38,
    label: "100 MHz",
  },
  {
    id: "150-mhz",
    real: 0.58,
    imaginary: -0.27,
    label: "150 MHz",
  },
  {
    id: "250-mhz",
    real: 0.72,
    imaginary: -0.12,
    label: "250 MHz",
  },
  {
    id: "350-mhz",
    real: 0.86,
    imaginary: -0.02,
    label: "350 MHz",
  },
  {
    id: "500-mhz",
    real: 1.03,
    imaginary: 0.08,
    label: "500 MHz",
  },
  {
    id: "750-mhz",
    real: 1.18,
    imaginary: 0.18,
    label: "750 MHz",
  },
  {
    id: "1-ghz",
    real: 1.38,
    imaginary: 0.31,
    label: "1 GHz",
  },
  {
    id: "1-5-ghz",
    real: 1.54,
    imaginary: 0.42,
    label: "1.5 GHz",
  },
  {
    id: "2-ghz",
    real: 1.76,
    imaginary: 0.58,
    label: "2 GHz",
  },
  {
    id: "3-ghz",
    real: 1.94,
    imaginary: 0.71,
    label: "3 GHz",
  },
  {
    id: "4-ghz",
    real: 2.12,
    imaginary: 0.84,
    label: "4 GHz",
  },
  {
    id: "5-ghz",
    real: 2.28,
    imaginary: 0.96,
    label: "5 GHz",
  },
  {
    id: "6-ghz",
    real: 2.41,
    imaginary: 1.08,
    label: "6 GHz",
  },
];
 
export default function SmithChartDemo() {
  return (
    <SmithChart
      ariaLabel="Antenna impedance sweep, 50 MHz to 6 GHz, July 2026"
      data={smithData}
      title="Antenna impedance sweep, 50 MHz to 6 GHz, July 2026"
      legend />
  );
}

Installation

API Reference

Import

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

Props

Prop

Type

Default

Requirement

Description

data

readonly SmithDatum[]

—

required

—

z0

number | undefined

—

optional

—

grid

boolean | undefined

—

optional

—

legend

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

—

optional

—

animation

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

—

optional

—

onHiddenSeriesChange

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

—

optional

—

onActiveDatumChange

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

—

optional

—

renderer

import("@grassroot/core").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 SmithDatum[]
Default: —
Requirement: required
Description: —

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

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

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

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

Prop: animation
Type: boolean | import(".").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: import("@grassroot/core").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: import("@grassroot/core").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 { SmithChart } from "@grassroot/charts-vue";

Props

Prop

Type

Default

Requirement

data

readonly SmithDatum[]

—

required

z0

number | undefined

—

optional

grid

boolean | undefined

undefined

optional

showGrid

boolean | undefined

undefined

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

gpuBackend

ChartGpuBackend | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

ariaLabel

string | undefined

—

optional

className

string | undefined

—

optional

title

string | undefined

—

optional

description

string | undefined

—

optional

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

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

Prop: grid
Type: boolean | undefined
Default: undefined
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: undefined
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: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional

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

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

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

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

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

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

Prop: theme
Type: PartialChartTheme | undefined
Default: —
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: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
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

Events

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

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootSmithChart } 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 SmithDatum[]
Default: —
Requirement: required

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

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

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

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

Prop: height
Type: number
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 { SmithChart } from "@grassroot/charts-svelte";

Props

Prop

Type

Default

Requirement

data

readonly SmithDatum[]

—

required

z0

number

—

optional

grid

boolean

—

optional

showGrid

boolean

—

optional

width

number

—

optional

height

number

—

optional

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

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

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

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

Prop: showGrid
Type: boolean
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: 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: false
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: class
Type: string
Default: —
Requirement: optional

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

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

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

Events

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

Content regions

children
dataSummary

Import

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

Props

Prop

Type

Default

Requirement

data

readonly SmithDatum[]

—

required

z0

number

—

optional

grid

boolean

—

optional

showGrid

boolean

true

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

"auto"

optional

gpuBackend

ChartGpuBackend

"auto"

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

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

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

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

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

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

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

Prop: renderer
Type: ChartRenderer
Default: "auto"
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: 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: —
Requirement: optional

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

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
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: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

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

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

Prop: onActiveDatumChange
Type: (id: string | null) => void
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: class
Type: string
Default: —
Requirement: optional

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

Events

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

Content regions

children
dataSummary