PizzaChart
Radial bar chart for player percentile profiles. Use it when the story is per-metric percentile strength around a circular profile, not polygon shape alone.
Canonical behaviors.
One hue instead of category colours when the chart should read as one overall profile.
More metrics and more categories. Labels are the main pressure point at this density.
Few metrics still render, but the radial bar chart becomes a weaker choice.
Heavier separators for a more editorial slice treatment.
Cleaner profile when the page already gives the percentile numbers elsewhere.
Initials or other center content can personalize the chart without changing the metric ring.
Stress test for outer-ring label overflow and wrapping behavior.
Five rings instead of four, for finer percentile granularity.
Custom dash pattern, colour, and width for the percentile grid.
The 50th-percentile reference line shows where the league median sits for each metric.
League median (solid) vs top-10 average (dashed red) shows where this player sits relative to both benchmarks.
ThemeProvider restyles labels and badges without changing the percentile model.
PizzaChart is part of the stable export union through the bounded export prop surface. Export-safe center content is initials only.
No rows means no slices.
Composition patterns.
Use the shared chart-frame note seam for sample and benchmark context instead of rebuilding prose around the card.
Shared concerns.
Choose PizzaChart
Use PizzaChart when percentile bars per metric are the story. If overall polygon shape matters more, RadarChart may be the better fit.
Category Grouping
Category order and colours are part of the editorial read. Keep them stable across comparable cards.
Center Content
Center content is decoration or identity, not a second data channel. Keep it subordinate to the slices.
Composition
PizzaChart is usually one profile card within a broader scouting module. Use external copy for role, sample, and comparison context.
Export / Static
PizzaChart is part of the stable export union, but only through the bounded export prop surface. In export-safe mode, initials are the only supported center content.
Responsive Behavior
Circular charts fail at the labels and value badges first. On narrower widths
the slice lengths should stay legible before decorative chrome does. Use
pizzaChartRecipes.smallMultiples
when the surrounding layout already carries the category context.
Width pressure.
At smaller widths the slice lengths should survive before long labels and value badges do.
Wider layouts preserve more label separation, badge readability, and reference-arc clarity.
Best-practice examples.
Minimal usage
Pass percentile rows and let the component handle category grouping, ring layout, and value badges.
import { PizzaChart } from "@withqwerty/campos-react";
export function PlayerPizza({ rows }) {
return <PizzaChart rows={rows} />;
}
Reference-first variant
Use named pizza recipes for recurring editorial combinations like benchmark-reference cards instead of rebuilding guide styling per page.
import { PizzaChart, pizzaChartRecipes } from "@withqwerty/campos-react";
export function PlayerPizzaBenchmark({ rows, referenceSets }) {
return (
<PizzaChart
rows={rows}
referenceSets={referenceSets}
{...pizzaChartRecipes.benchmarkReferences.props}
/>
);
}
Public surface.
| Prop | Type | Default | Description |
|---|---|---|---|
rows | PizzaChartRow[] | required | Array of metric rows with percentile, optional category, rawValue, and displayValue. |
metricOrder | string[] | undefined | Explicit metric order starting at 12 o'clock, clockwise. |
categoryOrder | string[] | undefined | Explicit category grouping order. |
showValueBadges | boolean | true | Show percentile values at bar tips. |
showAxisLabels | boolean | true | Show metric labels around the outer ring. |
showLegend | boolean | auto | Show legend; auto-shown when multiple categories are present. |
categoryColors | string[] | palette | Palette for category-colored slices. |
centerContent | { kind, src?, alt?, label? } | null | null | Optional center content: image, crest, or initials. |
gridRingStep | number | 25 | Percentile step for grid rings (e.g. 20 or 25). 100% ring always included. |
areas | PizzaChartAreasStyle | — | First-class styling surface for percentile slices. |
guides | PizzaChartGuidesStyle | theme | First-class styling surface for grid rings, spokes, and reference arcs. |
text | PizzaChartTextStyle | — | First-class styling surface for outer metric labels. |
badges | PizzaChartBadgesStyle | — | First-class styling surface for percentile value badges. |
referenceSets | PizzaChartReferenceSetInput[] | undefined | Benchmark value sets rendered as curved arcs per slice for comparison. |
methodologyNotes | ChartMethodologyNotes | — | Shared chart-frame note regions for sample and benchmark context. |
staticMode | boolean | false | Live-component static-friendly path. Hides tooltip-only UI and suppresses image center content. |
`methodologyNotes` and `staticMode` are supported in the live React surface, but the stable `ExportFrameSpec` contract uses its own bounded export props instead of forwarding the live `staticMode` toggle.
Create a React component using Campos PizzaChart. Import PizzaChart and pizzaChartRecipes from @withqwerty/campos-react, keep row shaping outside the component, show the smallest good usage first, then one recipe-driven single-colour or benchmark-reference variant.