Radar Chart

A versatile radar chart (spider/web chart) for visualizing multi-dimensional data. Perfect for player stats, skills assessment, product comparisons, and performance metrics.

Multi-Series

Gaming Ready

Interactive Tooltips

Smooth Animations

Keyboard Accessible

Responsive

TypeScript

Basic Radar Chart

Compare developer skill profiles across multiple dimensions with interactive hover and click

Selected: Click the chart to select

Animations

Show Dots

Installation

Get started with the RadarChart component in just a few steps.

Quick Install

bash

npx mario-charts@latest add radar-chart

Zero Lock-in Philosophy

The component is fully yours to own, modify, and customize.

Examples

Explore different configurations and use cases for the RadarChart component.

FIFA-Style Player Stats

Compare two players with overlapping radar polygons - a classic gaming use case

Product Comparison

Compare multiple products across various dimensions with automatic color cycling

Custom Styling

Customize colors, fill opacity, and stroke width for unique visual styles

Chart States

Built-in states for loading, error, and empty data scenarios.

Loading State

Error State

Chart Error

Failed to load chart data. Please try again.

Empty State

No Data

There's no data to display

API Reference

Complete list of props available for the RadarChart component.

Prop	Type	Default	Description
`series`required	readonly RadarSeries<T>[]	—	Array of data series to display. Each series has id, name, data object, and optional color
`axes`required	readonly RadarAxis[]	—	Configuration for each axis/dimension with key, label, and optional min/max bounds
`colors`	readonly string[]	DEFAULT_COLORS	Array of colors to use for series (cycles through for multiple series)
`height`	number	400	Height of the chart in pixels
`showAxisLabels`	boolean	true	Show labels at the end of each axis
`showDots`	boolean	true	Show dots at each data point vertex
`fillOpacity`	number	0.25	Opacity of the polygon fill (0-1)
`strokeWidth`	number	2	Width of the polygon stroke in pixels
`labelOffset`	number	25	Distance of axis labels from the chart edge
`loading`	boolean	false	Show loading state with animated skeleton
`error`	string \| null	null	Error message to display
`animation`	boolean	true	Enable entrance and hover animations
`onSeriesClick`	(series: RadarSeries<T>, index: number) => void	—	Callback fired when a series polygon is clicked
`onAxisClick`	(axis: RadarAxis, index: number) => void	—	Callback fired when an axis is clicked
`className`	string	—	Additional CSS classes to apply to the container