Pie Chart — Advanced

Custom renderers and headless architecture for pie charts.

Tell your AI agent what you want to customize.

ui.flitter.dev/llm/chart/pie-chart.md

Paste this URL into Claude Code or Cursor to generate custom renderers instantly.

Customizable Elements

Every visual element can be replaced with a custom renderer function. Each function receives element-specific args and a context with the full chart state.

Element	Args	Description
`layout`	`{ title: Widget, legends: Widget[], dataView: Widget }`	Overall chart layout — arranges title, legend, and pie area
`dataView`	`{ slices: { widget: Widget, startAngle: number, sweepAngle: number, percentage: number, index: number, name: string, value: number }[] }`	Pie container — wraps all slice widgets with angle and value metadata
`slice`	`{ index: number, name: string, value: number, percentage: number, sweepAngle: number }`	Individual pie slice element
`legend`	`{ name: string, index: number }`	Individual legend item rendering
`title`	`undefined`	Chart title text rendering

Usage

Override any element by passing a custom object.

import { PieChart } from "@flitterjs/chart";

PieChart({
  style: "toast",
  data: { /* ... */ },
  custom: {
    slice: (args, context) => {
      // args: { index, name, value, percentage, sweepAngle }
      // context: PieChartController & { config }
      //   - context.data, context.scale
      //   - context.width, context.height
      //   - context.toggleSeries(), ...
      // Return any Flitter Widget
    },
  },
});

← Pie Chart