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

Import​

Props​

Examples​

Simple​

With Custom Pattern​

No Labels​

Custom Max​

In a Wide Box​

See Also​

Import

Props

Examples

Simple

With Custom Pattern

No Labels

Custom Max

In a Wide Box

See Also