Chart

Multi-series line, area, and bar chart.

A token-driven chart for comparing one or more series as a line, filled area, or grouped bars. Scales and paths are computed from the data; the SVG is rendered as plain markup with `--ss-*`-styled axes, gridlines, and a cycling categorical palette. Every datum is keyboard-focusable and reveals an accessible tooltip; the chart auto-generates a screen-reader summary (or pass `summary`). Empty input shows an em-dash placeholder.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Chart } from 'dssoca';

  const series = [
    { label: 'Requests', data: [{ x: 0, y: 120 }, { x: 1, y: 180 }, { x: 2, y: 150 }] },
    { label: 'Errors', data: [{ x: 0, y: 12 }, { x: 1, y: 22 }, { x: 2, y: 9 }] },
  ];
</script>

<Chart {series} />
<Chart {series} variant="bar" />
<Chart {series} variant="area" fluid />

Props

Prop	Type	Default	Description
`series`	`ChartSeries[]`	—	Required. Each series has a `label`, `data: ChartPoint[]` ({ x: number \| Date; y: number }), and an optional `color`.
`variant`	`'line' \| 'area' \| 'bar'`	`'line'`	Rendering style. `bar` draws grouped bars per x-category across series.
`xType`	`'linear' \| 'time' \| 'band'`	—	X scale kind. Defaults to `band` for bars, `time` for Date x-values, else `linear`.
`xFormat`	`(x: number \| Date) => string`	—	Format an x value for axis ticks + tooltip.
`yFormat`	`(y: number) => string`	—	Format a y value for axis ticks + tooltip.
`height`	`number`	`240`	Intrinsic drawing height in px.
`width`	`number`	`480`	Intrinsic drawing width in px.
`fluid`	`boolean`	`false`	Stretch to the container width via the viewBox (width:100%).
`legend`	`boolean`	`true`	Show the series legend (labels + colour swatches).
`tooltip`	`boolean`	`true`	Reveal a tooltip on hover/focus of a datum. Each datum is keyboard-focusable.
`summary`	`string`	—	Screen-reader summary + accessible name; auto-generated when absent.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.