Petal Radar Chart React component
A radar chart that blooms: each score is a petal, a dashed outline shows the benchmark, and petals ease to their new size as you switch between teams.
About the Petal Radar Chart component
Petal Radar Chart keeps what a radar chart is good at and drops what makes it hard to read. Each score is its own petal, so strengths and gaps stand apart instead of blending into one shape.
A dashed outline shows the benchmark behind every petal, and the list beside it gives the exact score and the difference. Switching team eases each petal to its new size, so you can watch the profile change.
When to use it
Use it for profiles across several dimensions, like team health, skills, product reviews or audit scores.
Use it with five to ten dimensions on a shared scale. For comparing many items on one measure, a bar chart is better.
Installation
Add the Petal Radar Chart component to your project with the shadcn CLI. It lands in components/petal-radar-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/petal-radar-chartProps
<PetalRadarChart /> accepts 9 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Team health" |
| subtitle | string | "Each petal is a score out of 100, against the company average." |
| axes One name per petal, clockwise from the top. | string[] | AXES |
| views | { label: string; values: number[] }[] | VIEWS |
| benchmark Scores drawn as an outline behind every view. Pass null to hide it. | number[] | null | BENCHMARK |
| benchmarkLabel Name of the outline in the legend. | string | "Company average" |
| defaultView Index of the view shown first. | number | 0 |
| color Colour of the petals. | string | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Team health"
- subtitlestringDefault: "Each petal is a score out of 100, against the company average."
- axes
One name per petal, clockwise from the top.
string[]Default: AXES - views{ label: string; values: number[] }[]Default: VIEWS
- benchmark
Scores drawn as an outline behind every view. Pass null to hide it.
number[] | nullDefault: BENCHMARK - benchmarkLabel
Name of the outline in the legend.
stringDefault: "Company average" - defaultView
Index of the view shown first.
numberDefault: 0 - color
Colour of the petals.
string
Petal Radar Chart FAQ
- What range do scores use?
- 0 to 100. A score of 100 reaches the outer ring.
- Can I hide the benchmark?
- Yes. Pass benchmark={null} and the outline, differences and legend all go.
- How many axes work best?
- Five to ten. Beyond that the petals get thin and the labels start to crowd.
- Why petals rather than a polygon?
- In a polygon, the area depends on the order of the axes, which can mislead. Separate petals keep each score independent.
