Skip to content

PieChart

Defined in: packages/pixi-charts/src/charts/PieChart.ts:144

Pie / donut chart — categorical proportions of a whole.

One class, two variants. options.innerRadius (default 0) controls the shape: zero renders a true pie; any positive value renders a donut. The geometry, hit-test, animation, legend, and tooltip are otherwise identical — same single-class-for-related-variants pattern import(’./BarChart.js’).BarChart uses for orientation.

Encoding contract. encoding.x (categorical) names the slice label; encoding.value carries the numeric magnitude divided proportionally into angular slices. encoding.color is optional — when omitted, slices take distinct colors from category10; when present, the color field’s distinct values drive the palette assignment.

Geometry. Centered in the plot area with outerRadius = min(plotW, plotH) / 2 - 8; innerRadius is clamped to [0, outerRadius - 1]. The sweep starts at options.startAngle (default -π/2, i.e. 12 o’clock) and proceeds clockwise on screen.

Animation. A parallel sweep — all slices grow together, finishing at the same instant — driven by tween. spec.animation.enter: false skips it; prefers-reduced-motion is honored by tween().

Update animation. Chart.update with { animate: true } tweens slice angles from the previous to the new values when the category set is unchanged. When categories differ, the call silently snaps (animation across a changed slice set requires diffing, which is a deferred session).

Hit-testing. Polar — pointer offset from center is converted to (r, θ) and matched against each slice’s ring + angular range. Pure function in buildPieHitTester, unit-tested without a PIXI app.

For most use cases, prefer the declarative render entry point — use this class directly only when you need fine-grained lifecycle control.

new PieChart(opts): PieChart

Defined in: packages/pixi-charts/src/charts/PieChart.ts:184

PieChartOptions

PieChart

Chart.constructor

get destroyed(): boolean

Defined in: packages/pixi-charts/src/core/Chart.ts:155

true once destroy has run.

boolean

Chart.destroyed


get initialized(): boolean

Defined in: packages/pixi-charts/src/core/Chart.ts:160

true once init has completed.

boolean

Chart.initialized

destroy(): void

Defined in: packages/pixi-charts/src/charts/PieChart.ts:213

Destroy every owned primitive in addition to the base-class teardown. Idempotent — each primitive is itself idempotent so a partial-init failure stays safe.

void

Chart.destroy


init(): Promise<void>

Defined in: packages/pixi-charts/src/charts/PieChart.ts:201

Override of Chart.init: after the PIXI Application is ready, runs the first render so the spec dispatcher hands back a fully-rendered chart.

Promise<void>

Chart.init


off(_event, handler): void

Defined in: packages/pixi-charts/src/core/Chart.ts:259

Remove a previously registered click handler. No-op if the handler wasn’t registered, or after destroy.

"click"

ChartEventHandler

void

Chart.off


on(_event, handler): () => void

Defined in: packages/pixi-charts/src/core/Chart.ts:248

Register a handler for a chart event. Returns an unsubscribe function; calling it (or off) removes the handler.

Currently only 'click' is supported. Handlers receive a ChartClickEvent describing the clicked datum, its index, the plot-area-local pixel position, and (for multi-series charts) the series name. The library reports the click; what it means is up to the consumer — pair with update to build drilldown.

Handlers are cleared automatically on destroy.

"click"

ChartEventHandler

() => void

const off = chart.on('click', (event) => {
console.log('clicked', event.datum, 'at index', event.index);
});
// later: off(); // or: chart.off('click', handler);

Chart.on


update(newData, options?): void

Defined in: packages/pixi-charts/src/core/Chart.ts:218

Swap the chart’s data without recreating the WebGL context. Reuses the existing PixiJS application, scales infrastructure, axes, legend, and interaction layer; recomputes scales, geometry, and hit-testing from the new data.

update() cannot change the chart type, encoding, orientation, donut inner radius, or color scheme — only the rows in data. To change any of those, destroy() this chart and construct a fresh one.

Synchronous. The PixiJS application is already initialised; updating is just recompute + redraw.

readonly Record<string, unknown>[]

UpdateOptions

void

If called before init has resolved.

If called after destroy, this is a silent no-op.

Chart.update