Chart

The Chart namespace's compound parts, covering Cartesian series (Chart, Chart.Line, Chart.Area, Chart.Bar) and the independent Chart.Pie root.

OpenedResolved

Backlog is growing. September opened 2,640 and resolved 2,470. Tab into the plot to hear each bar, or a legend row to strike a series out.

View code

<div mix={[vstack({ gap: 3, align: "stretch" }), is("100%"), maxIs("32rem")]}>
	<Chart.Bar
		aria-label="Tickets opened and resolved, April through September"
		width={480}
		height={200}
		domain={[0, 3000]}
		tickCount={4}
		series={["opened", "resolved"]}
		data={VOLUME.map((row) => ({
			category: row.month,
			values: {
				opened: { value: row.opened, label: `${row.month} opened: ${COUNT.format(row.opened)}` },
				resolved: {
					value: row.resolved,
					label: `${row.month} resolved: ${COUNT.format(row.resolved)}`,
				},
			},
		}))}
	/>

	<Chart.Legend aria-label="Series shown">
		<Chart.Legend.Item color={1} defaultChecked mix={[ariaChecked()]}>
			Opened
		</Chart.Legend.Item>
		<Chart.Legend.Item color={2} defaultChecked mix={[ariaChecked()]}>
			Resolved
		</Chart.Legend.Item>
	</Chart.Legend>

	<div mix={[hstack({ gap: 0, align: "center" })]} aria-hidden="true">
		{VOLUME.map((row) => (
			<span
				key={row.month}
				mix={[grow(), basis("0%"), textAlign("center"), text("xs"), fg("neutral.muted")]}
			>
				{row.month}
			</span>
		))}
	</div>

	<p mix={[text("sm"), fg("neutral")]}>
		<span mix={[weight("medium")]}>Backlog is growing.</span> September opened 2,640 and
		resolved 2,470. Tab into the plot to hear each bar, or a legend row to strike a
		series out.
	</p>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Chart } from "@sdxc/ui";

Renders a chart's coordinate space: a responsive <svg> whose viewBox comes from width/height, shared via context so nested series share one scale. A paired Chart.Legend must render as this root's later sibling.

Composition

The parts the component publishes, each a static property of the host.

Chart
Chart.LineRenders a line series: a stroked, aria-hidden <path> connecting points via linearScale and linePath, plus a focusable marker with a <title>, sampled via ticks for manageable density.
Chart.AreaRenders an area series: a filled, aria-hidden <path> tracing points and closing down to baseline, mapped through linearScale and areaPath, plus a focusable marker sampled via ticks.
Chart.PieRenders a pie or donut chart: an independent <svg> root, since a circular layout shares no domain with a Cartesian Chart.
Chart.BarRenders a categorical bar chart: an independent <svg> root, since a band axis shares no continuous domain with a Cartesian Chart.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`width`	`number`	Pixel width of the chart's internal coordinate space — the value every nested series' `x` positions are mapped onto. The `<svg>` renders at its container's full size, scaling this space while preserving aspect ratio.
`height`	`number`	Pixel height of the chart's internal coordinate space — the value every nested series' `y` positions are mapped onto.
`xDomain`	`readonly [number, number]`	`[start, end]` bounds of every nested series' horizontal data values, mapped across `width` and shared through context so every series lines up on the same horizontal scale.
`yDomain`	`readonly [number, number]`	`[start, end]` bounds of every nested series' vertical data values, mapped across `height`. `start` maps to the coordinate space's bottom edge and `end` to its top, matching a value axis growing upward against SVG's `y`.

Also accepts everything in Omit<TagProps<"svg">, "viewBox" | "width" | "height">.

Chart.Line

Prop	Type	Description
`points`	`readonly LinePoint[]`	The series' data points, in draw order along `x`. The plotted path connects every point given here; the accessible markers render on only a representative spread of them, chosen through `markerCount`.
`color?`	`Color`	Categorical color. Defaults to DEFAULT_LINE_COLOR.
`markerCount?`	`number`	Approximate number of accessible, hoverable markers placed along `points`. Each marker snaps to the point closest to one of this many evenly spread "nice" values across the ancestor Chart's `xDomain`.
`parts?`	{ /** Additional mixin(s) applied to the stroked `<path>`. / path?: TagProps<"path">["mix"]; /* Additional mixin(s) applied to each point's `<circle>` marker. */ marker?: TagProps<"circle">["mix"]; }	Per-part styling for the plotted `path` and each point `marker`, layered after each part's own built-in styling. Use the `mix` prop instead to style the series' outer host.

Also accepts everything in Omit<TagProps<"g">, "children" | "points">.

Chart.Area

Prop	Type	Description
`points`	`readonly AreaPoint[]`	The series' data points, in draw order along `x`. The filled region traces every point given here before closing down to `baseline`; markers render on a representative spread of them, chosen through `markerCount`.
`color?`	`Color`	Categorical color. Defaults to DEFAULT_AREA_COLOR.
`baseline?`	`number`	The `yDomain` value the filled region closes down (or up) to — typically the value axis' zero line. Defaults to DEFAULT_AREA_BASELINE.
`markerCount?`	`number`	Approximate number of accessible, hoverable markers placed along `points`. Each marker snaps to the point closest to one of this many evenly spread "nice" values across the ancestor Chart's `xDomain`.
`parts?`	{ /** Additional mixin(s) applied to the filled `<path>`. / path?: TagProps<"path">["mix"]; /* Additional mixin(s) applied to each point's `<circle>` marker. */ marker?: TagProps<"circle">["mix"]; }	Per-part styling for the filled `path` and each point `marker`, layered after each part's own built-in styling. Use the `mix` prop instead to style the series' outer host.

Also accepts everything in Omit<TagProps<"g">, "children" | "points">.

Chart.Pie

Prop	Type	Description
`data`	`readonly PieDatum[]`	The wedges to draw, in draw order. Each entry's position in this list picks its default color when its own `color` is omitted.
`width`	`number`	Pixel width of the chart's internal coordinate space that `viewBox` maps onto. The rendered `<svg>` fills `100%` of the host's own inline size, scaled to fit while preserving this aspect ratio against `height`.
`height`	`number`	Pixel height of the chart's internal coordinate space, on the same terms as `width`.
`innerRadius?`	`number`	Pixel distance from center to every wedge's inner edge, in the same coordinate space as `width`/`height`. A positive value smaller than the chart's outer radius produces a donut with a hole that size.
`parts?`	{ /** Additional mixin(s) applied to every wedge's `<path>`. */ segment?: TagProps<"path">["mix"]; }	Per-part styling for every wedge `segment`, layered after its own built-in styling. Use the `mix` prop instead to style the chart's outer host.

Also accepts everything in PieAngles.Options.

Also accepts everything in Omit<TagProps<"svg">, "children" | "viewBox" | "width" | "height">.

Chart.Bar

Prop	Type	Description
`data`	`readonly BarRow[]`	Rows to plot, one band per row along the category axis, in draw order.
`series`	`readonly string[]`	Ordered series keys plotted within every row's band. A key's position in this list is both the stable index stamped onto `data-series-index` and its slot in the `--ui-chart-1`–`--ui-chart-8` palette, wrapping past it.
`width`	`number`	Pixel width of the chart's internal coordinate space that `viewBox` maps onto. The rendered `<svg>` fills `100%` of the host's own inline size, scaled to fit while preserving this aspect ratio against `height`.
`height`	`number`	Pixel height of the chart's internal coordinate space, on the same terms as `width`.
`domain`	`readonly [number, number]`	`[start, end]` bounds of every bar's value, mapped across `height`. `start` maps to the bottom edge and `end` to the top, matching the same upward-value convention Chart.Props.yDomain uses against SVG's `y`.
`tickCount?`	`number`	Approximate number of horizontal gridlines spanning `domain`. Defaults to DEFAULT_BAR_TICK_COUNT.
`categoryGap?`	`number`	Fraction of each category band reserved as a gap from its neighbors. Defaults to DEFAULT_CATEGORY_GAP.
`seriesGap?`	`number`	Fraction of each category's own band reserved as a gap between its series' bars — most bar charts plot a single series per category, with no neighboring bar to gap against.
`parts?`	`{ /** Additional mixin(s) applied to each horizontal gridline. / gridline?: TagProps<"line">["mix"]; /* Additional mixin(s) applied to each plotted bar. */ bar?: TagProps<"rect">["mix"]; }`	Per-part styling for the gridlines and bars, layered after each part's own built-in styling. Use the `mix` prop instead to style the chart's outer host.

Also accepts everything in Omit< TagProps<"svg">, "children" | "viewBox" | "width" | "height" >.