RadarChart

Compare several metrics across line, area, or polar column series.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { RadarChart } from '@vrum/ui';

<RadarChart
  title={"Team performance"}
  categories={["Quality","Speed","Clarity","Coverage","Consistency"]}
  series={[{"name":"Current","data":[85,70,92,68,88]},{"name":"Previous","data":[68,65,70,60,78]}]}
  type={"area"}
  maxValue={100}
  width={500}
  height={340}
  showLegend={true}
  showDataTable={false}
/>

RadarChart props

Prop	Type	Default	Description
`categories*`	`string[]`	none	Ordered category labels.
`series*`	`ChartSeries[]`	none	Named data series; each data array follows category order.
`type`	`"area" \| "line" \| "column"`	`"area"`	Interaction or visualization type.
`maxValue`	`number`	none	max value configuration.
`title`	`string`	none	Heading shown above the content.
`description`	`string`	none	Supporting explanation.
`width`	`number`	`500`	Width used for the SVG viewBox.
`height`	`number`	`340`	Height of the component in pixels.
`className`	`string`	none	Additional CSS classes.
`colors`	`string[]`	`chartPalette`	colors configuration.
`showLegend`	`boolean`	none	Display series or category labels.
`showDataTable`	`boolean`	none	Expand the accessible data table.
`onPointClick`	`((point: ChartPoint) => void)`	none	Called when a chart point is activated with a pointer or keyboard.
`valueFormat`	`((value: number) => string)`	none	value format configuration.

RadarChart

Compare several metrics across line, area, or polar column series.

Interactive playground

LIVE PREVIEW

Team performance

View data

Metric	Current	Previous
Quality	85	68
Speed	70	65
Clarity	92	70
Coverage	68	60
Consistency	88	78

Loading preview…

Generated code

import { RadarChart } from '@vrum/ui';

<RadarChart
  title={"Team performance"}
  categories={["Quality","Speed","Clarity","Coverage","Consistency"]}
  series={[{"name":"Current","data":[85,70,92,68,88]},{"name":"Previous","data":[68,65,70,60,78]}]}
  type={"area"}
  maxValue={100}
  width={500}
  height={340}
  showLegend={true}
  showDataTable={false}
/>

RadarChart props

Prop	Type	Default	Description
`categories*`	`string[]`	none	Ordered category labels.
`series*`	`ChartSeries[]`	none	Named data series; each data array follows category order.
`type`	`"area" \| "line" \| "column"`	`"area"`	Interaction or visualization type.
`maxValue`	`number`	none	max value configuration.
`title`	`string`	none	Heading shown above the content.
`description`	`string`	none	Supporting explanation.
`width`	`number`	`500`	Width used for the SVG viewBox.
`height`	`number`	`340`	Height of the component in pixels.
`className`	`string`	none	Additional CSS classes.
`colors`	`string[]`	`chartPalette`	colors configuration.
`showLegend`	`boolean`	none	Display series or category labels.
`showDataTable`	`boolean`	none	Expand the accessible data table.
`onPointClick`	`((point: ChartPoint) => void)`	none	Called when a chart point is activated with a pointer or keyboard.
`valueFormat`	`((value: number) => string)`	none	value format configuration.

RadarChart

Interactive playground

Props

RadarChart props

RadarChart

Interactive playground

Props

RadarChart props