Chart

A small line, area or bar plot in plain SVG. Not a charting library — everything here is a scale and a path, which is the right trade for six numbers on a dashboard card.

src/components/ui/chart.tsx

About

From the component's own source, where it was written.

A small plot — line, area, bar, stacked bar or scatter — in plain SVG.

Deliberately not a charting library. Everything here is a scale and a path, and the alternative is 200 kB of dependency for a component that renders six numbers on a dashboard card. When a real chart is needed (brushing, zoom, stacked transitions) reach for a library and use it directly; this covers the shape you actually put beside a Stat.

The plot area is a fixed 100×60 grid stretched by preserveAspectRatio:none, so it fills its container without measuring. Anything that must keep its proportions under that stretch — strokes, dots, text — either sets vector-effect: non-scaling-stroke or is drawn outside the stretched group.

Install

npx astralyx-ui add chart

Usage

import { Chart } from '@/components/ui/chart'

<Chart series={series} labels={months} variant="area" />

Composer

Change the props and the source below follows.

DeploysRollbacks

Props

variant

gridaxis

tsx

<Chart
  series={series}
  labels={months}
  variant="line"
  grid={true}
  axis={true}
/>

Examples

Variants

tsx

<Chart series={series} labels={months} />
<Chart series={series} labels={months} variant="bar" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Chart`

Extends Omit<ComponentProps<'figure'>, 'height'>.

Prop	Type	Default	Description
series	ChartSeries[]	required	`{ name, values, color? }`. Colours fall back to a palette by index.
labels	string[]	—	X labels, rendered below the plot rather than inside the stretched SVG.
variant	'line' \| 'area' \| 'bar' \| 'stacked-bar' \| 'scatter'	'line'	Bars group per index across series.
height	number	180	—
grid	boolean	true	Legend defaults on for more than one series.
axis	boolean	true	Legend defaults on for more than one series.
legend	boolean	—	Legend defaults on for more than one series.
min	number	—	Pin the scale. Defaults span zero to the highest value, so bar heights stay honest.
max	number	—	Pin the scale. Defaults span zero to the highest value, so bar heights stay honest.
valueFormat	(value: number) => string	DEFAULT_VALUE_FORMAT	—

Types

`ChartSeries`

A small plot — line, area, bar, stacked bar or scatter — in plain SVG.

Field	Type	Description
name	string	—
values	number[]	—
color?	string	Any CSS colour. Falls back to a palette entry by index.

Behaviour

Topic	Detail	Description
scaling	100×60 viewBox	Stretched by preserveAspectRatio:none so it fills its container without measuring; strokes use non-scaling-stroke to stay even under that stretch.