Charts

RadarChart

A radar chart — several measures of one thing, drawn as a polygon per series.

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 { RadarChart } from '@the_viveksingh/vivek-ui/charts'
import '@the_viveksingh/vivek-ui/charts.css'

Several measures of one thing

A polygon per series over shared axes. Series are separated by colour, dash and vertex shape, so two overlapping releases stay readable in greyscale - and every figure is in the accessible table, because polygon area is unreadable by design.

v0.5
v1.0

Release scorecard
Axis	v0.5	v1.0
Speed	70	85
A11y	85	96
Size	90	88
Types	80	95
Docs	60	90

<RadarChart
  title="Release scorecard"
  axes={['Speed', 'A11y', 'Size', 'Types', 'Docs']}
  series={[
    { name: 'v0.5', data: [70, 85, 90, 80, 60] },
    { name: 'v1.0', data: [85, 96, 88, 95, 90] },
  ]}
/>

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 RadarChart
Prop	Type	Default	Description
`data`	`ChartData`	—	Single series: one value per axis, in axis order.
`series`	`readonly ChartSeries[]`	—	Multiple series. Takes precedence over `data` when both are given.
`axes` required	`readonly string[]`	—	Axis names, clockwise from the top. Values beyond the axis count are dropped.
`max`	`number`	—	Top of the scale. Defaults to the largest value across every series.
`diameter`	`number`	—	Diameter of the `viewBox`, in px. The chart scales to its container width.
`rings`	`number`	—	Concentric guide rings.
`fill`	`boolean`	—	Fill each polygon with a translucent wash.
`showLegend`	`boolean`	—	—
`interactiveLegend`	`boolean`	—	Each legend entry is a checkbox that shows and hides its series, with a fade — the way every charting library's users expect a legend to behave. On by default whenever the legend shows; pass `false` for a figure in a report, where the legend is a key and not a control. No JavaScript and no client boundary: the entries are real checkboxes and the chart reacts with `:has()`.