Radar chart
Release readiness
77.8+8.6%
| Dimension | Current | Target |
|---|---|---|
| Quality | 82 | 92 |
| Test coverage | 74 | 90 |
| Accessibility | 88 | 90 |
| Reliability | 91 | 95 |
| Performance | 69 | 85 |
| Documentation | 63 | 80 |
Usage
Import the component and the stylesheet once. See Getting started to install the package.
import { RadarChartCard } from '@lilt-ui/charts';
import '@lilt-ui/charts/styles.css';<RadarChartCard
title="Release readiness"
data={releaseReadiness}
category="area"
series={[{ key: 'current', label: 'Current' }]}
/>Omit title to leave out the visible title. Set header={false} to remove the whole header, and use aria-label to name a chart inside your own card. legend={false} removes the legend independently. surface="ghost" controls only the visual frame. See Card composition.
Data
Each row is one dimension, drawn clockwise from the top in the order given; category names it, and each series is a numeric field of the row, checked by TypeScript. A radar needs three to twelve dimensions on one shared scale: domain sets it, and by default it runs from zero to a round number above the highest value. The headline is the average of the first solid series; dashed series, such as a target, draw as an outline and stay out of it. A missing value breaks the outline at that spoke and drops the fill, so a gap never looks like a low score.
// One row per dimension, drawn clockwise from the top.
const releaseReadiness = [
{ area: 'Quality', current: 82, target: 92 },
{ area: 'Accessibility', current: null, target: 90 }, // not audited
// …
];
<RadarChartCard
title="Release readiness"
data={releaseReadiness}
category="area" // a text field: the dimension
series={[
{ key: 'current', label: 'Current' }, // a numeric field
{ key: 'target', label: 'Target', dashed: true }, // a reference
]}
/>For a working period select, pass ranges. Each range brings its own data and delta.
<RadarChartCard
title="Release readiness"
category="area"
series={[{ key: 'current' }, { key: 'target', dashed: true }]}
ranges={[
{ id: 'quarter', label: 'This quarter', data: thisQuarter, delta: 0.086 },
{ id: 'last-quarter', label: 'Last quarter', data: lastQuarter, delta: 0.031 },
]}
/>Props
Every prop RadarChartCard accepts, in the order you are likely to reach for them.
| Prop | Type | Description |
|---|---|---|
title | string | Optional visible title. Omit to render no title. Also supplies the accessible name unless aria-label is set. |
header | boolean | Defaults to true. False removes the whole header: title, headline, delta and period controls, with no reserved space. Pass data directly when your app owns period selection. |
aria-label | string | Accessible chart name, independent of the visible title. Falls back to title, then a generic chart name. |
data | Row[] | One row per dimension, clockwise from the top. Omit when using ranges. |
category | text key of Row | Names each dimension. Must be unique. |
series | { key, label?, color?, dashed? }[] | Profiles to compare, one numeric field each. Dashed series draw as an outline and stay out of the headline. |
domain | [number, number] | Values at the center and the outer ring. Defaults to zero through a round maximum. |
aggregate | 'mean' | 'sum' | 'max' | How the resting headline sums up the first series. Mean by default. |
grid | 'polygon' | 'circle' | Rings that follow the spokes (default), or round rings. |
height | number | Plot height in pixels. Defaults to 300. |
headline | number | Resting headline. Defaults to the aggregate of the first series. |
delta | number | Fractional change for the chip. |
deltaTone | 'default' | 'inverse' | 'neutral' | Use inverse when a decrease is good. |
range | string | Static period label in the header. |
ranges | { id, label, data, delta?, headline? }[] | Turns the period label into a select. Each range swaps the dimensions. |
legend | false | 'tiles' | 'inline' | 'list' | 'pills' | 'bars' | False removes the legend without changing the data. How the series legend lays out: value tiles (default), a compact inline key, list rows, tinted pills, or bars against the largest. |
legendSwatch | 'square' | 'dot' | 'line' | The mark beside each legend label. Defaults to a rounded square. |
valueFormat | Intl.NumberFormatOptions | Formats the headline, tiles, and axis, e.g. currency. |
surface | 'elevated' | 'outline' | 'ghost' | Card treatment. Ghost removes the visual frame only; header and legend are independent controls. |
palette | 'iris' | 'cobalt' | 'emerald' | Series colors. Iris by default; explicit series colors still win. |
numberStyle | 'count' | 'pop' | 'slide' | 'roll' | 'flow' | 'scramble' | How the headline animates when its value changes. Count (default) counts to the new value. |
loading | boolean | Shows a neutral loading skeleton, not data. |
loadingStyle | 'shimmer' | 'draw' | 'breathe' | Shimmer sweeps a highlight over still shapes; draw reveals them in order; breathe lets them settle. Follows the selected look, including depth, and respects reduced motion. |
empty | 'dots' | 'shape' | ReactElement | null | What the card shows when the period has no data. Dots (default) gathers a quiet dot field around the message; shape lays the chart’s own outline behind it. Pass `<ChartEmpty>` with your own words, any element of your own, or null for nothing. Both looks stay still, so empty never reads as loading, and the headline reads a dash, never zero. |
motion | 'auto' | 'none' | None turns off decorative motion; reduced motion does this automatically. |
defaultRange | string | Initial range id; defaults to the first supplied range. |
locale | string | Locale used for number formatting. Defaults to en-US. |
formatValue | (value: number) => string | Custom value text, taking precedence over valueFormat. |
badge | ReactNode | Content in the tab above the card. A comparison badge can replace this while a comparison is active. |
className | string | Additional class on the card frame. |
style | CSSProperties | ChartStyle | Inline styles and scoped --lilt-* chart variables. |