Pie Chart
A pie chart for visualizing category distribution and share.
Installation
tsx
import { PieChart } from "madagent";Default
Loading chart...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | Record<string, unknown>[] | - | The chart data array |
nameKey* | string | - | Data key for the slice name/category |
dataKey* | string | - | Data key for the slice value |
config* | ChartConfig | - | Maps each name to a label and color |
showTooltip | boolean | true | Show the tooltip on hover |
showLegend | boolean | true | Show the chart legend |
innerRadius | number | 0 | Inner radius for donut chart (0 = full pie) |
outerRadius | number | 110 | Outer radius of the pie |
centerLabel | string | - | Label in the center (donut only) |
centerSubLabel | string | - | Secondary text below the center label |
height | number | 350 | Container height in pixels |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Loading chart...
Usage
tsx
<PieChart
data={[
{ المتصفح: "كروم", الزوار: 275 },
{ المتصفح: "سفاري", الزوار: 200 },
{ المتصفح: "فايرفوكس", الزوار: 187 },
]}
nameKey="المتصفح"
dataKey="الزوار"
config={{
كروم: { label: "كروم", color: "var(--md-chart-1)" },
سفاري: { label: "سفاري", color: "var(--md-chart-2)" },
فايرفوكس: { label: "فايرفوكس", color: "var(--md-chart-3)" },
}}
height={300}
/>