Components

Chart

Chart presents numeric series as either bar or line marks.

Examples

Bar Mark

Preview unavailable for this example in the static docs build.

Show code

<Chart caption="Quarterly revenue" data={monthlyRevenue} label="Revenue" mark="bar" showValues></Chart>

Line Mark

Preview unavailable for this example in the static docs build.

Show code

<Chart caption="Quarterly revenue" data={monthlyRevenue} label="Revenue" mark="line" showValues></Chart>

Empty State

Preview unavailable for this example in the static docs build.

Show code

<Chart data={[]} emptyState="No revenue data yet" label="Revenue"></Chart>

Selection

Preview unavailable for this example in the static docs build.

Show code

<Chart caption="Quarterly revenue" data={monthlyRevenue} defaultSelectedDatumId="feb" label="Revenue" mark="bar" showValues valueFormatter={(value) => `$${value}k`}></Chart>

Line Selection

Preview unavailable for this example in the static docs build.

Show code

<Chart caption="Quarterly revenue" data={monthlyRevenue} defaultSelectedDatumId="feb" label="Revenue" mark="line" showValues valueFormatter={(value) => `$${value}k`}></Chart>

API

Prop	Type	Required	Description
`data`	`IChartDatum[]`	Yes	No description yet.
`label`	`string`	Yes	No description yet.
`caption`	`string`	No	No description yet.
`mark`	`'bar' \| 'line'`	No	No description yet.
`showValues`	`boolean`	No	No description yet.
`emptyState`	`string`	No	No description yet.
`height`	`number`	No	No description yet.
`selectedDatumId`	`string`	No	No description yet.
`defaultSelectedDatumId`	`string`	No	No description yet.
`onSelectionChange`	`(datum: IChartDatum) => void`	No	No description yet.
`valueFormatter`	`(value: number, datum: IChartDatum) => string`	No	No description yet.

Inherits additional props from IBaseComponent.

Overview

Chart presents numeric series as either bar or line marks.

SwiftUI Correspondence: Adapts Swift Charts into a lightweight React component with a simplified single-series API.

Notes

Use mark="bar" for category comparisons
Use mark="line" for trend visualization
Use showValues when exact values should stay visible beside the graphic
Use selectedDatumId or defaultSelectedDatumId when the surrounding UI needs a highlighted datum
Use valueFormatter to keep visible values and accessibility labels aligned
Marks support keyboard selection with arrow keys, Home, and End

Card

Card is a container that presents content on a card. Card is a container with elevated styling, typically used to display related content.

Color

Color is a view that displays a solid color. Color is used to display color swatches, backgrounds, and visual color indicators.

Chart

Examples

API

Overview

Notes

On this page