RadarChart
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A spider/radar chart for multi-dimensional comparisons. Draws a filled polygon over a spoke for each axis and the outline of the scale's maximum. Requires at least 3 axes and a value other than zero.
The chart keeps its proportions in any box: it is drawn as large as the box holds and centered, in
the widget and in its previews alike. A value above max reaches past the outline.
Import
import { RadarChart } from "~lib/charts/radar-chart";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
data | { axis: string; value: number }[] | Yes | N/A | Axis data (min 3 axes) |
max | number | No | auto | Maximum scale value (defaults to data max) |
pattern | PatternType | No | "diagonal" | Fill pattern for the data polygon |
showLabels | boolean | No | true | Show axis labels |
width | number | string | No | 300 | Chart width |
height | number | string | No | 300 | Chart height |
PatternType: "solid" | "diagonal" | "dots" | "crosshatch"
Examples
Simple
With Custom Pattern
No Labels
Custom Max
In a Wide Box
See Also
- AreaChart - Area chart with fill
- ScatterPlot - Scatter plot