Chart

Accessible Cartesian area/line series with native source-data disclosure.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add chart

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { Chart } from '@app/components/ui/chart.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><Chart title="Orders by week" series={[{label:"Orders"}]} data={[{label:"Week 1",values:[32]},{label:"Week 2",values:[48]}]} /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`ChartProps`	`title`	`string`	No
`ChartProps`	`description`	`string`	Yes
`ChartProps`	`data`	`[object Object]`	No
`ChartProps`	`series`	`[object Object]`	No
`ChartProps`	`type`	`"area" \| "line"`	Yes
`ChartProps`	`orientation`	`"horizontal" \| "vertical"`	Yes	Legend layout; the plot retains its Cartesian orientation.
`ChartProps`	`indicator`	`"dot" \| "line" \| "dashed"`	Yes
`ChartProps`	`state`	`"rest" \| "hover" \| "loading" \| "empty"`	Yes
`ChartProps`	`locale`	`string`	Yes	Explicit number locale shared by server and client.
`ChartProps`	`class`	`string`	Yes

Keyboard

Key	Action
`Tab/Shift+Tab`	Focus the native data disclosure; chart graphics add no focus targets
`Enter/Space`	Toggle the source data table

Tokens

Semantic contract roles: SF:deco/sparkline, SF:deco/ticks, border/subtle, chart/1..5, destructive/default, info/default, primary/default, success/default, text/muted, warning/default.

CSS custom properties referenced directly: --ns-border, --ns-border-subtle, --ns-border-width, --ns-card, --ns-control-gap, --ns-fg, --ns-font-data, --ns-muted-fg, --ns-radius-card, --ns-ring, --ns-series-color, --ns-shadow-md, --ns-space-1, --ns-space-2, --ns-space-3, --ns-stack-gap, --ns-text-caption, --ns-text-small, --ns-text-strong, --ns-weight-strong.

Contract and compatibility

Accessibility pattern: native figure and SVG image with labeled series plus native data disclosure/table

Exact data values remain available through a native disclosure/table; hover is supplemental, never the only data access.
Series count derives from1–3 labeled input series. Each datum has a label and matching finite numeric values. Legend orientation does not rotate the Cartesian plot.
Existing chart/1..3 roles follow the latest per-theme chart palette ledger. No token values change.

Design contract values marked planned are not implementation props. The props above describe what ships today.