Radar charts for every framework.
14 radar charts from shadcn/ui, six months around one center: polygon and circle grids, filled or bare, dots, outlines, legends, printed values and a radius axis. Rebuilt on TanStack Charts for React, Vue, Svelte and Solid, with the Recharts originals for React. Free with an account.
Radar charts
14 charts.
- Multiple Radar ChartRadar charts
- Radar ChartRadar charts
- Radar Chart with DotsRadar charts
- Radar Chart with LegendRadar charts
- Radar Chart with Circle GridRadar charts
- Radar Chart with Filled Circle GridRadar charts
- Radar Chart with Circle Grid, No LinesRadar charts
- Radar Chart with Filled GridRadar charts
- Radar Chart with Custom GridRadar charts
- Radar Chart without GridRadar charts
- Radar Chart with Lines OnlyRadar charts
- Radar Chart with Custom LabelsRadar charts
- Radar Chart with IconsRadar charts
- Radar Chart with Radius AxisRadar charts
Need the page around it? With Pro, your AI agent installs dashboard, stats and monitoring blocks from a prompt, charts already laid out in them.
Get ProMore charts
The other 6 families. Each opens its charts on React, live, with their code.
Radar charts in other frameworks
The same 14 radar charts on every framework. React, Vue, Svelte and Solid draw them with TanStack Charts; React on Recharts keeps shadcn/ui's originals.
Pricing
Charts are free. Pro builds the rest of the page
All 70 charts are free with an account. Pro adds 6,000+ blocks, from dashboards to pricing, the Pro backgrounds, buttons, shaders and text effects, and the MCP that installs them from a prompt.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
- How many people can use the license.
- Client work, SaaS products and anything you charge for.
- Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.
- Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.
- Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.
- Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.
- Typewriters, scrambles, counters and more, for headlines, labels and numbers.
- Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.
- WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.
- One design and one theme on all four: the components, blocks and effects are built for each framework.
- React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.
- From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.
- Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.
- Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.
- Debounce, local storage, media queries and more: each hook is one typed file you own.
- From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.
- Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.
- Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.
- Priority requests are answered first.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- Seats: 1 seat
- Commercial use: Personal & open source only
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
- Seats: Up to 5 seats
- Commercial use: Included
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
- Seats: Unlimited seats
- Commercial use: Included
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Priority
Billed once a year in USD. Cancel anytime.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- How many people can use the license.Seats: 1 seat
- Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
- Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
- Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
- Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
- Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
- Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
- Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
- WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
- One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
- React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
- From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
- Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
- Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
- Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
- From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
- Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
- Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
- Priority requests are answered first.Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
- How many people can use the license.Seats: Up to 5 seats
- Client work, SaaS products and anything you charge for.Commercial use: Included
- Priority requests are answered first.Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
- How many people can use the license.Seats: Unlimited seats
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
Yes. Radar, spider, web and star chart all name the same thing: one value per spoke from a shared center, joined into a closed shape. On TanStack Charts, the shape is a closed `radialArea` inside a `polar()` layer, and its `radialGrid` and `angleGrid` guides draw the rings and the spokes.
When one thing is measured on several comparable dimensions and the overall shape is the point: a skill profile, a product's scores, two plans side by side. It misleads when people need exact differences: the outline changes with the order of the spokes, and the filled area grows faster than the values. For a trend over time, use a line chart; for exact comparisons, use bars.
Five to eight spokes read well. With fewer than five, a bar chart says the same thing more clearly; past eight, the labels crowd and the shape stops meaning much. Each row of `chartData` adds a spoke, starting at twelve o'clock and going clockwise, and all 14 charts here use six, one per month.
Polygon rings repeat the angles of the data, so the outline is easy to trace: that's the plain Radar Chart and most of the others. Circles keep each ring at one distance from the center and look softer: set `shape: "circle"` on `radialGrid`, as the circle grid charts do. Either shape takes `fill` and `fillOpacity` for tinted bands, which is what the filled grid and filled circle grid versions add.
Leave `radialGrid` out of `polar()`'s `guides` for no rings, as the radar without grid does, with dots on the values to read against. To drop only the spokes, keep `angleGrid` for the month names and give it `stroke: "none"`. The circle grid without lines does that, and so does the custom grid, which keeps one ring with `values: [300]`.
Two of these charts print them. Radar Chart with Radius Axis labels the rings: `radialGrid({ labels: true })` writes each ring's value along one spoke, placed with `labelAngle`. Radar Chart with Custom Labels prints both series' values above each month's name with two `radialText` marks. The others leave the numbers to the tooltip.
Two, or three at most. Six of these charts overlay Desktop and Mobile on one grid and one radius scale, so the shapes compare fairly, and the later mark paints on top. The legend and icons versions add `ChartLegend`, which names each color from `chartConfig`. Past three series the fills turn into one dark patch: use outlines, separate radars or a grouped bar chart.
A filled shape shows one profile's footprint best; most of these fill it at `fillOpacity: 0.6` so the grid shows through. Outlines suit two close series that would hide each other: Radar Chart with Lines Only draws each as a closed `radialLine`, 2 pixels wide. Dots mark where each value lands, which helps on circle grids and with no grid at all: a `radialDot` mark with `r: 4` on top of the shape.
Signed in, copy the chart's command: `npx shadcn@latest add` with its URL (`shadcn-vue` and `shadcn-svelte` for those ports). It adds the chart to `components/charts`, the `tanstack-chart` kit to your ui folder, and `@tanstack/charts`. Import the chart and render it.
Yes. Every chart is free to use in personal and commercial projects. Seeing the code and installing it takes a free account, one tap with Google or GitHub. Pro is the site's paid plan for blocks, the Pro collections and the MCP; you don't need it for charts.
4.9 out of 5 from 150+ developers
Pick a radar. Swap in your data.
14 radar charts for React, Vue, Svelte and Solid, free with an account. With Pro, your AI agent installs the dashboard, stats and monitoring blocks around them from a prompt.
Get Pro
- Cancel anytime
- Keep what you've shipped