nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Radial chart — text variant.
View the full component source code below.
"use client"
import { RadialBar, RadialBarChart, PolarAngleAxis } from "recharts"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ChartConfig, ChartContainer } from "@/components/ui/chart"
const DEFAULT_DATA = [{ value: 75, fill: "var(--color-score)" }]
const config = {
score: { label: "Score", color: "var(--color-tanzanite, #B388FF)" },
} satisfies ChartConfig
export function ChartRadialText({ loading = false }: { loading?: boolean } = {}) {
return (
<Card role="figure" data-slot="chart-block" data-portal="https://design.nyuchi.com/components/chart-block" aria-label="Radial chart">
<CardHeader>
<CardTitle>Radial - Center Text</CardTitle>
<CardDescription>Score display with center text</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={config} loading={loading} className="mx-auto aspect-square max-h-[250px]">
<RadialBarChart
data={DEFAULT_DATA}
startAngle={90}
endAngle={90 + 360 * 0.75}
innerRadius={80}
outerRadius={110}
>
<PolarAngleAxis type="number" domain={[0, 100]} angleAxisId={0} tick={false} />
<RadialBar dataKey="value" background cornerRadius={10} />
<text
x="50%"
y="45%"
textAnchor="middle"
dominantBaseline="middle"
className="fill-foreground text-4xl font-bold"
>
75
</text>
<text
x="50%"
y="58%"
textAnchor="middle"
dominantBaseline="middle"
className="fill-muted-foreground text-sm"
>
out of 100
</text>
</RadialBarChart>
</ChartContainer>
</CardContent>
</Card>
)
}
npx shadcn@latest add https://mzizi.dev/api/v1/ui/chart-radial-textFetch this component's metadata and source code from the registry API.
/api/v1/ui/chart-radial-textcomponents/blocks/charts/chart-radial-text.tsx