About
A concentric-ring chart that shows one or more values as progress against a shared maximum, in a full circle or a semicircle gauge.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Radial Chart to your project and fits it to your theme.
Code
How Radial Chart is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import RadialChart from "@/components/ui/radial-chart";
export default function RadialChartDemo() {
return (
<div className="w-full max-w-lg mx-auto">
<RadialChart
caption="Storage used"
variant="full"
max={100}
data={[
{ label: "Documents", value: 42, color: "pink" },
{ label: "Photos", value: 28, color: "blue" },
{ label: "Videos", value: 18, color: "olive" },
]}
/>
</div>
);
}
More by luv-jeri
View all
Pixel Swap
26
Line Chart
9
Pie Chart
Infinite Spiral Gallery
Dither Sculpture