Pie Chart API
Complete API reference for the Pie Chart, including data format, configuration options, custom parts, and context methods.
Data Format
Each dataset entry represents a slice of the pie with a name and numeric value.
type PieChartData = {
datasets: { name: string; value: number }[];
};AG Style Config
Pie
| Property | Type | Default | Description |
|---|---|---|---|
| pie.innerRadiusRatio | number | 0 | Inner radius ratio (0 = full pie, >0 = donut shape). |
Radial
| Property | Type | Default | Description |
|---|---|---|---|
| radial.visible | boolean | false | Whether radial labels and ticks are visible. |
| radial.gap | number | 6 | Gap between the pie and radial labels. |
Data Label
| Property | Type | Default | Description |
|---|---|---|---|
| dataLabel.visible | boolean | true | Whether data labels on slices are visible. |
| dataLabel.fontSize | number | 12 | Data label font size. |
| dataLabel.fontColor | string | "white" | Data label text color. |
| dataLabel.fontWeight | string | "bold" | Data label font weight. |
| dataLabel.radiusRatio | number | 0.65 | Position of data label as ratio of radius (0 = center, 1 = edge). |
| dataLabel.formatter | (args: { index, name, value, percentage, startAngle, sweepAngle }) => string | (args) => `${args.percentage.toFixed(1)}%` | Formatter function for data label text. |
Radial Label
| Property | Type | Default | Description |
|---|---|---|---|
| radialLabel.fontSize | number | 16 | Radial label font size. |
| radialLabel.fontColor | string | "#333333" | Radial label text color. |
| radialLabel.fontWeight | string | "bold" | Radial label font weight. |
| radialLabel.nameColor | string | "#777777" | Color for the name portion of the radial label. |
| radialLabel.formatter | (args: { index, name, value, percentage, angle }) => string | (args) => String(args.value) | Formatter function for radial label text. |
Radial Tick
| Property | Type | Default | Description |
|---|---|---|---|
| radialTick.length | number | 14 | Length of the radial tick line. |
| radialTick.color | string | "#999999" | Radial tick line color. |
| radialTick.strokeWidth | number | 2 | Radial tick line stroke width. |
Toast Style Config
Pie
| Property | Type | Default | Description |
|---|---|---|---|
| pie.innerRadiusRatio | number | 0 | Inner radius ratio (0 = full pie, >0 = donut shape). |
Radial
| Property | Type | Default | Description |
|---|---|---|---|
| radial.visible | boolean | false | Whether radial labels and ticks are visible. |
| radial.gap | number | 8 | Gap between the pie and radial labels. |
Data Label
| Property | Type | Default | Description |
|---|---|---|---|
| dataLabel.visible | boolean | true | Whether data labels on slices are visible. |
| dataLabel.fontSize | number | 14 | Data label font size. |
| dataLabel.fontColor | string | "white" | Data label text color. |
| dataLabel.fontWeight | string | "bold" | Data label font weight. |
| dataLabel.radiusRatio | number | 0.65 | Position of data label as ratio of radius. |
| dataLabel.formatter | (args: { index, name, value, percentage, startAngle, sweepAngle }) => string | (args) => `${args.percentage.toFixed(1)}%` | Formatter function for data label text. |
Radial Label
| Property | Type | Default | Description |
|---|---|---|---|
| radialLabel.fontSize | number | 13 | Radial label font size. |
| radialLabel.fontColor | string | "#333333" | Radial label text color. |
| radialLabel.fontWeight | string | "600" | Radial label font weight. |
| radialLabel.formatter | (args: { index, name, value, percentage, angle }) => string | (args) => args.name | Formatter function for radial label text. |
Radial Tick
| Property | Type | Default | Description |
|---|---|---|---|
| radialTick.length | number | 18 | Length of the radial tick line. |
| radialTick.color | string | "#999999" | Radial tick line color. |
| radialTick.strokeWidth | number | 1 | Radial tick line stroke width. |
Custom Parts
Override any visual element by providing a custom builder function: (args, context) => Widget
| Part | Args | Description |
|---|---|---|
| layout | { title: Widget; legends: Widget[]; plot: Widget } | Top-level layout composing title, legends, and the plot area. |
| plot | { dataView: Widget; tooltipArea: Widget; radialItems: PieChartRadialItem[] } | The plot area with data view, tooltip, and radial items. |
| dataView | { segments: PieChartSegment[] } | Container for all pie segments. |
| segment | { index: number; name: string; value: number; percentage: number; startAngle: number; sweepAngle: number; dataLabel: Widget; isHovered: boolean } | Individual pie segment/slice. |
| dataLabel | { index: number; name: string; value: number; percentage: number; startAngle: number; sweepAngle: number } | Data label on a pie segment. |
| radialLabel | { index: number; name: string; value: number; percentage: number; angle: number; isHovered: boolean } | Radial label outside the pie. |
| radialTick | { index: number; name: string; value: number; percentage: number; angle: number; isHovered: boolean } | Radial tick line connecting pie to label. |
| legend | { name: string; index: number; isVisible: boolean } | Individual legend item. |
| title | undefined | Chart title element. |
| tooltip | HoveredPieChartSegment | Tooltip content for a hovered segment. |
| tooltipArea | { tooltip: Widget | null; hoveredSegment: HoveredPieChartSegment | null } | Tooltip positioning area. |
Context: PieChartContext
Available in every custom builder via the second argument.
| Name | Type | Kind | Description |
|---|---|---|---|
| data | PieChartData | property | Current chart data (filtered by hidden series). |
| legends | string[] | property | All legend names from the raw data. |
| width | number | property | Current chart width in pixels. |
| height | number | property | Current chart height in pixels. |
| hiddenSeries | ReadonlySet<string> | property | Set of currently hidden series names. |
| hoveredIndex | number | null | property | Index of the currently hovered segment. |
| config | TConfig | property | The resolved chart configuration object. |
| isSeriesVisible(name) | (name: string) => boolean | method | Check if a series is currently visible. |
| toggleSeries(name) | (name: string) => void | method | Toggle visibility of a series. |
| showSeries(name) | (name: string) => void | method | Show a hidden series. |
| hideSeries(name) | (name: string) => void | method | Hide a visible series. |
| showAllSeries() | () => void | method | Show all hidden series. |
| hoverSegment(index) | (index: number) => void | method | Set hover state on a segment. |
| unhoverSegment(index?) | (index?: number) => void | method | Clear hover on a segment. |
| unhoverAllSegments() | () => void | method | Clear all segment hover state. |
| isSegmentHovered(index) | (index: number) => boolean | method | Check if a specific segment is hovered. |
| setSize(width, height) | (width: number, height: number) => void | method | Update chart dimensions. |
Custom Part Example
import { ToastPieChart } from "@/components/flitter/charts/toast-pie-chart";
<ToastPieChart
data={data}
config={{
radial: { visible: true },
dataLabel: { visible: false },
}}
/>