Spider charts for Solid apps.
14 radar charts from shadcn/ui, written as Solid components on TanStack Charts: six months around one center on polygon or circle grids, filled, outlined or bare, with dots, two series, legends with icons, printed values and a radius axis. 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 Solid charts
The other 6 families. Each opens its charts on Solid, 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
When one thing is scored on five to eight comparable measures and the outline is the point: a skill profile, or two plans side by side. Every chart here has six spokes, one per row of `chartData`. With fewer than five, or when exact gaps matter, a bar chart says it more plainly.
Two read well. Five of these charts overlay desktop and mobile as two `radialArea` marks on one radius scale, mobile on top at full opacity over desktop's 0.6. The Radar Chart with Lines Only draws both as 2px `radialLine` outlines instead, which keeps close shapes apart; past two series, use separate cards.
`radialGrid({ shape: "polygon" })` repeats the data's angles and `shape: "circle"` draws round rings; the Filled Grid and Filled Circle Grid add `fill: "var(--color-desktop)"` at 0.2. The Custom Grid keeps one ring with `values: [300]`, the two without spokes give `angleGrid` `stroke: "none"`, and the Radar Chart without Grid leaves `radialGrid` out and marks the values with `radialDot`.
The Radar Chart with Custom Labels writes each month's two values, like `186/80`, above its name with two `radialText` marks in a `decorative()` layer, and the one with Radius Axis prints each ring's value along one spoke with `radialGrid({ labels: true })`. Both are SVG text in the definition, not Solid elements, so they're the same lines as the React file's.
Radar Chart with Icons sets `ArrowDownFromLine` and `ArrowUpFromLine` from `lucide-solid` as the config's `icon`s, and `<ChartLegend class="absolute inset-x-0 -bottom-2.5" />` inside `ChartContainer` lists them over the chart's bottom edge, so the radar keeps its size. The kit renders each icon with Solid's `<Dynamic>`, so any component works there.
There isn't any: none of the 14 radar files imports `solid-js`. The rows, any shared `frame` object and `defineChart(…)` sit at module scope, and the component only returns the card with `ChartContainer` in it. To highlight a month or switch a series, add `createSignal` and build the definition in `createMemo`, as the Interactive Bar Chart does.
Give each row the spoke's name and one field per series, `{ month, desktop, mobile }`, and point each `radialArea`'s `angle` and `radius` at those fields. For scores that change, pass them as a prop and read `props.scores` inside `createMemo(() => chartDefinition(props.scores))`, where `chartDefinition` wraps the file's `defineChart` call. Don't destructure `props`, or Solid stops tracking them.
Yes. Each file is a plain Solid component, `ChartRadarSimple` and so on, exported named and as the default, so a SolidStart route renders it like any other. There's no `"use client"` line to keep, as the React file has.
Signed in, copy the chart's command: `npx shadcn@latest add` with its URL. 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
Six spokes, free. The rest with Pro.
The 14 Solid radar charts are yours free with an account. With Pro, your AI agent installs the dashboard, stats and monitoring blocks to put them in.
Get Pro
- Cancel anytime
- Keep what you've shipped