Headless, accessible charts for Svelte 5
@human-kit/charts gives you the difficult parts
of a chart: the scales, the geometry, the keyboard operation, the focus control and the accessible
names. The parts have no styles. You write the design, and no part changes it.
pnpm add @human-kit/charts
npm install @human-kit/charts
yarn add @human-kit/charts
bun add @human-kit/charts
Try it
Move the focus into the chart with the Tab key. The arrow keys move the focus over the points, and the tooltip shows the values. Enter selects a point.
Why this library
- Accessibility is the primary function
- A chart is one tab stop, and the arrow keys move the focus over the data. Each point has an accessible name with all of its values. The data table gives the same values as a table.
- The parts have no styles
- A mark draws with currentColor. Each part shows its state in data attributes: data-series, data-focused, data-focus-visible and data-selected. You write all of the CSS.
- A chart is a composition of marks
- You put a line, an area or bars on shared scales. Each mark can have its own data. The field names of the data are typed, thus an incorrect name is a type error.
- No runtime dependency
- The scales, the ticks, the paths and the stack transform are in the package. Each scale has a subpath export, and your bundler includes only the parts that you import.
Documentation
Each page has the live demos, the props table, and the list of the data attributes.
Overview
- Quick Start Install @human-kit/charts and make your first accessible Svelte chart, with keyboard operation, accessible names and a data table.
- Accessibility How @human-kit/charts makes a chart accessible — one tab stop, arrow-key navigation over the data, a name for every point, a data table, and the parts you still provide.
Chart
- Chart Chart.Root, Chart.Title and Chart.Plot — the data, the typed channels, the scales, the formats, the size and the selection of an accessible Svelte chart.
- Scales The linear, time and band scales of @human-kit/charts — pure functions on their own subpaths, used as the type of a chart axis or on their own.
Marks
- Line Chart.Line draws one line per series with a focusable point per row — a keyboard-accessible Svelte line chart with typed channels and data of its own.
- Area Chart.Area fills the space below each series, side by side or stacked — an accessible Svelte area chart with keyboard focus on every point.
- Bar Chart.Bar draws grouped, stacked and horizontal bars on a band scale — an accessible Svelte bar chart where every bar is a keyboard focus target.
- Dot Chart.Dot draws one dot per row — an accessible Svelte scatter plot with a shape per series, a predictable keyboard order and a row per dot in the data table.
Guides
- Axis and Grid Chart.Axis draws the ticks and labels of an axis on any side of the plot, and Chart.Grid draws the grid lines — decoration that stays out of the accessibility tree.
- Legend Chart.Legend lists the series of a Svelte chart in an HTML list, with a swatch per series or content of your own, so color is never the only key.
Access
- Tooltip Chart.Tooltip shows the values of the hovered or keyboard-focused point of a Svelte chart, without a second announcement for screen readers.
- DataTable Chart.DataTable gives every value of a Svelte chart as an HTML table, for screen readers only or for all users, with the selected point marked.