Charts

AreaChart

A line chart with the region under each series filled. The y axis always includes zero, because an area measured from an arbitrary floor overstates its own magnitude.

Server safePure SVG0 dependenciesSource

Import

Charts live at their own subpath with their own stylesheet, so an app that never draws one pays nothing for them.

import { AreaChart } from '@the_viveksingh/vivek-ui/charts'
import '@the_viveksingh/vivek-ui/charts.css'

Filled area

Sessions this week
Category	Value
Mon	320
Tue	480
Wed	410
Thu	610
Fri	540

<AreaChart
  data={[
    { x: 'Mon', y: 320 },
    { x: 'Tue', y: 480 },
    { x: 'Wed', y: 410 },
    { x: 'Thu', y: 610 },
    { x: 'Fri', y: 540 },
  ]}
  title="Sessions this week"
  height={240}
  showGrid
/>

Stacked

Set `stacked` and each series sits on the one below it rather than overlapping.

Traffic by channel
Category	Organic	Paid
Mon	200	120
Tue	300	180
Wed	260	150
Thu	380	230

<AreaChart
  series={[
    {
      name: 'Organic',
      data: [
        { x: 'Mon', y: 200 },
        { x: 'Tue', y: 300 },
        { x: 'Wed', y: 260 },
        { x: 'Thu', y: 380 },
      ],
    },
    {
      name: 'Paid',
      data: [
        { x: 'Mon', y: 120 },
        { x: 'Tue', y: 180 },
        { x: 'Wed', y: 150 },
        { x: 'Thu', y: 230 },
      ],
    },
  ]}
  stacked
  showLegend
  title="Traffic by channel"
  height={260}
/>

Accessibility

A chart is not an image

Every chart carries role="img" with a generated accessible name, and renders a real <table> alongside it — visually hidden, never display: none — so a screen-reader user gets the actual numbers instead of "chart". Set accessibleTable={false} only if you have provided the data in a table elsewhere on the page.

No series is ever encoded by colour alone: each carries a distinct dash pattern and marker shape on top of its colour, so the chart survives greyscale printing and every common form of colour blindness.

The palette is verified rather than asserted. Each theme has its own six colours, because one set cannot clear the 3:1 non-text contrast threshold against both a white and a near-black plot surface. Separation is measured under simulated protanopia, deuteranopia and tritanopia: for one to four series — which is nearly every chart — the closest pair sits at ΔE 17, slightly better than the unmodified Okabe-Ito palette it is derived from. Past four series the dash patterns and marker shapes carry the distinction.

Hostile data

Real series contain gaps and rubbish. Every chart is tested against empty arrays, a single point, all-equal values, negatives crossing zero, NaN, ±Infinity, 1e308 and 1e-320, with an assertion that no rendered SVG attribute ever contains NaN. A bad row degrades the chart; it does not blank your page.

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for AreaChart
Prop	Type	Default	Description
`data`	`ChartData`	—	Single series. `[{ x, y }]`, or a bare `number[]` where the index is the x.
`series`	`readonly ChartSeries[]`	—	Multiple series. Takes precedence over `data` when both are given.
`height`	`number`	—	—
`showGrid`	`boolean`	—	—
`showAxes`	`boolean`	—	—
`showLegend`	`boolean`	—	—
`interactiveLegend`	`boolean`	—	Turn each legend entry into a checkbox that shows and hides its series, with a fade. No JavaScript and no client boundary: the entries are real checkboxes and the chart reacts with `:has()`. Off by default, because it makes the legend a set of controls - right for a dashboard, wrong for a figure in a report.
`showPoints`	`boolean`	—	—
`curve`	`'linear' \| 'smooth'`	—	—
`strokeWidth`	`number`	—	—
`stacked`	`boolean`	—	Stack the series on top of one another instead of overlaying them. Positive and negative values stack in opposite directions from zero, so mixed signs still read.
`tooltip`	`boolean`	—	Opt in to the pointer hover tooltip. Mouse only - the data table is the AT path.