Radial Bar Chart
Wrap bar lengths around a circle to compare series using a polar layout.
Source
LLM docs
Package
npm install @plocks/chartsExamples
3
Properties
53
Playground
Basics
Concentric rings compare progress across several metrics, with tip labels and a center average.
Loading demo…
import { RadialBarChart } from '@plocks/charts';
import { AVG, METRICS } from './data';
export function Demo() {
return (
<RadialBarChart
title="Quarterly KPIs"
subtitle="Progress toward goals"
maw={400}
h={400}
data={METRICS}
barThickness={18}
gap={12}
showValueLabels
valueFormatter={(value) => `${value}%`}
centerLabel={`${AVG}%`}
centerSubLabel="Avg score"
multiTooltip
liveTooltip
legend={{ show: true, position: 'bottom' }}
/>
);
}Goal Progress Ring
A single thick ring with a center readout — ideal for one headline metric.
Loading demo…
import { RadialBarChart } from '@plocks/charts';
import { GOAL } from './data';
export function Demo() {
return (
<RadialBarChart
title="Fundraising Goal"
subtitle="$74k raised of $100k"
maw={300}
h={300}
data={GOAL}
barThickness={24}
showValueLabels={false}
centerLabel="74%"
centerSubLabel="of goal"
multiTooltip
liveTooltip
/>
);
}Semicircle Gauge
Set startAngle/endAngle to a 180° sweep for a speedometer-style gauge that fills the space.
Loading demo…
import { RadialBarChart } from '@plocks/charts';
import { SCORE } from './data';
export function Demo() {
return (
<RadialBarChart
title="Customer Satisfaction"
subtitle="Rolling 30-day CSAT"
maw={340}
h={240}
startAngle={-90}
endAngle={90}
data={SCORE}
barThickness={24}
showValueLabels={false}
centerLabel="82"
centerSubLabel="out of 100"
multiTooltip
liveTooltip
/>
);
}Related charts
Further reading
React Native design for iOS, Android, and Web.
Quick Links
Resources