Chart Radar

Compares several series across one shared set of axes.

/// ServicesService health
Nominal
Critical

Configurations

Supported configurations for this component.

DefaultsOwn data

Configurations

2 examples
Defaults
/// ServicesService health
Nominal
Critical
Own data
/// PerformanceSystem performanceCurrent performance by area
Score

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

RadarSeries

PropTypeDefaultDescription
keyreqstring-Key in each data row whose numeric value this series plots.
labelreqstring-Series name shown in the legend and tooltip.
colorstring-Stroke and fill color for this series, defaults to the brand color.

RadarChart

PropTypeDefaultDescription
dataobject[]-Array of data rows, each an axis label plus one numeric value per series.
seriesRadarSeries[]-Series descriptors defining which data keys to plot and how.
labelstring'/// Diagnostics'Kicker text shown above the title in the card header.
titlestring'Systems Radar'Main heading shown in the card header.
descriptionstring-Optional line of text shown beneath the title.
classNamestring-Additional CSS classes for the root element.
styleReact.CSSProperties-Inline styles merged onto the root element.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states

Badge

Displays the state a row or cell reports, such as online, queued, or fault.

8 variants