Skip to content

Documentation / @ripl/charts / PieChart

Class: PieChart<TData>

Defined in: charts/src/charts/pie.ts:142

Pie chart rendering proportional arc segments with optional inner radius (donut).

Supports a chart title, interactive tooltips, a legend in any position, and animated entry/update/exit transitions. Segments grow outward from the centre with staggered delays, and labels fade in after the arcs have settled.

Extends

Type Parameters

Type ParameterDefault typeDescription
TDataunknownThe type of each data item in the dataset.

Constructors

Constructor

new PieChart<TData>(target, options): PieChart<TData>

Defined in: charts/src/charts/pie.ts:147

Parameters

ParameterType
targetstring | Context<Element, Record<string, unknown>> | HTMLElement
optionsPieChartOptions<TData>

Returns

PieChart<TData>

Overrides

Chart.constructor

Properties

PropertyModifierTypeDescriptionInherited fromDefined in
animationOptionsprotectedChartAnimationOptions-Chart.animationOptionscharts/src/core/chart.ts:135
autoRenderprotectedboolean-Chart.autoRendercharts/src/core/chart.ts:134
colorGeneratorprotectedGenerator<string, string, any>-Chart.colorGeneratorcharts/src/core/chart.ts:143
legend?protectedLegend-Chart.legendcharts/src/core/chart.ts:138
optionsprotectedPieChartOptions-Chart.optionscharts/src/core/chart.ts:142
parent?publicEventBus<PieChartEventMap>The parent event bus that emitted events bubble up to, if any.Chart.parentcore/src/core/event-bus.ts:89
rendererprotectedRenderer-Chart.renderercharts/src/core/chart.ts:133
sceneprotectedScene-Chart.scenecharts/src/core/chart.ts:132
title?protectedChartTitle-Chart.titlecharts/src/core/chart.ts:137
titleOptions?protectedChartTitleOptions-Chart.titleOptionscharts/src/core/chart.ts:136
defaultKeyreadonlytypeof defaultKeyThe key under which resources are retained when no explicit key is provided.Chart.defaultKeycore/src/core/disposer.ts:11

Methods

createLayout()

protected createLayout(): ChartLayout

Defined in: charts/src/core/chart.ts:208

Creates a fresh layout for the current canvas size and padding.

Returns

ChartLayout

Inherited from

Chart.createLayout


destroy()

destroy(): void

Defined in: charts/src/core/chart.ts:399

Destroys the chart, its scene, context, and cleans up all event subscriptions.

Returns

void

Inherited from

Chart.destroy


dispose()

protected dispose(key?): void

Defined in: core/src/core/disposer.ts:25

Disposes all resources under the given key, or all resources if no key is provided.

Parameters

ParameterType
key?PropertyKey

Returns

void

Inherited from

Chart.dispose


emit()

Call Signature

emit<TEvent>(event): TEvent

Defined in: core/src/core/event-bus.ts:137

Emits an event, invoking all matching handlers and bubbling to the parent if applicable.

Type Parameters
Type ParameterDefault type
TEvent extends Event<undefined>Event<undefined>
Parameters
ParameterType
eventTEvent
Returns

TEvent

Inherited from

Chart.emit

Call Signature

emit<TEvent>(type, data): Event<PieChartEventMap[TEvent]>

Defined in: core/src/core/event-bus.ts:138

Emits an event, invoking all matching handlers and bubbling to the parent if applicable.

Type Parameters
Type Parameter
TEvent extends keyof PieChartEventMap
Parameters
ParameterType
typeTEvent
dataPieChartEventMap[TEvent]
Returns

Event<PieChartEventMap[TEvent]>

Inherited from

Chart.emit


export()

export(): ContextExport

Defined in: charts/src/core/chart.ts:394

Exports a snapshot of the chart's rendered context (image, url, or string). See Context.export.

Returns

ContextExport

Inherited from

Chart.export


getAnimationDuration()

protected getAnimationDuration(referenceDuration?): number

Defined in: charts/src/core/chart.ts:198

Parameters

ParameterTypeDefault value
referenceDurationnumber1000

Returns

number

Inherited from

Chart.getAnimationDuration


getChartArea()

protected getChartArea(): ChartArea

Defined in: charts/src/core/chart.ts:309

Returns

ChartArea

Inherited from

Chart.getChartArea


getPadding()

protected getPadding(): ChartPadding

Defined in: charts/src/core/chart.ts:299

Returns

ChartPadding

Inherited from

Chart.getPadding


getSeriesColor()

protected getSeriesColor(seriesId): string

Defined in: charts/src/core/chart.ts:336

Parameters

ParameterType
seriesIdstring

Returns

string

Inherited from

Chart.getSeriesColor


has()

has(type): boolean

Defined in: core/src/core/event-bus.ts:94

Returns whether there are any listeners registered for the given event type.

Parameters

ParameterType
typekeyof PieChartEventMap

Returns

boolean

Inherited from

Chart.has


highlightSeries()

protected highlightSeries(id): void

Defined in: charts/src/core/chart.ts:360

Highlights a single series/segment by id (dimming the others), or restores all when null. Wired to legend hover via reserveLegend. No-ops for charts that never registered highlight groups.

Dims the leaf elements of each group rather than the group itself: a group's opacity does not cascade multiplicatively, and the leaves carry no explicit opacity (so a group-level tween is a no-op — element.interpolate skips nil current values). Each leaf's rest opacity is captured once on the element (via a Symbol slot, like applyHoverHighlight), so hidden elements stay hidden and restoring returns to the true value.

Parameters

ParameterType
idstring | null

Returns

void

Inherited from

Chart.highlightSeries


init()

protected init(): void

Defined in: charts/src/core/chart.ts:166

Returns

void

Inherited from

Chart.init


off()

off<TEvent>(type, handler): void

Defined in: core/src/core/event-bus.ts:112

Removes a previously registered handler for the given event type.

Type Parameters

Type Parameter
TEvent extends keyof PieChartEventMap

Parameters

ParameterType
typeTEvent
handlerEventHandler<PieChartEventMap[TEvent]>

Returns

void

Inherited from

Chart.off


on()

on<TEvent>(type, handler, options?): Disposable

Defined in: core/src/core/event-bus.ts:99

Subscribes a handler to the given event type and returns a disposable for cleanup.

Type Parameters

Type Parameter
TEvent extends keyof PieChartEventMap

Parameters

ParameterType
typeTEvent
handlerEventHandler<PieChartEventMap[TEvent]>
options?EventSubscriptionOptions

Returns

Disposable

Inherited from

Chart.on


once()

once<TEvent>(type, handler, options?): Disposable

Defined in: core/src/core/event-bus.ts:127

Subscribes a handler that is automatically removed after it fires once.

Type Parameters

Type Parameter
TEvent extends keyof PieChartEventMap

Parameters

ParameterType
typeTEvent
handlerEventHandler<PieChartEventMap[TEvent]>
options?EventSubscriptionOptions

Returns

Disposable

Inherited from

Chart.once


registerHighlightGroups()

protected registerHighlightGroups(groups): void

Defined in: charts/src/core/chart.ts:345

Registers the top-level series/segment groups that map one-to-one to legend items (by matching group.id to the legend item id). Charts call this each render so highlightSeries can dim the other series when a legend entry is hovered. Replaces any previously registered set.

Parameters

ParameterType
groupsGroup<ElementEventMap>[]

Returns

void

Inherited from

Chart.registerHighlightGroups


render()

render(): Promise<void>

Defined in: charts/src/charts/pie.ts:159

Runs a render pass, invoking callback to draw into the scene and marking the chart as rendered. Concrete charts override this and delegate to super.render(async () => { ... }); any error thrown by the callback is caught and the context cleared, so a failed render never leaves a partially-drawn chart.

Returns

Promise<void>

Overrides

Chart.render


reserveLegend()

protected reserveLegend(layout, items, input?): void

Defined in: charts/src/core/chart.ts:248

Reserves a band for the legend (when visible and given items) at its configured position and renders it into that band, reconciling against the previous render.

Parameters

ParameterType
layoutChartLayout
itemsLegendItem[]
input?ChartLegendInput

Returns

void

Inherited from

Chart.reserveLegend


reserveTitle()

protected reserveTitle(layout): void

Defined in: charts/src/core/chart.ts:218

Reserves a band for the chart title (if configured) and renders it. Returns the remaining area unchanged when there is no title. Call this first in a chart's layout pass so the title sits outermost.

Parameters

ParameterType
layoutChartLayout

Returns

void

Inherited from

Chart.reserveTitle


resolveAnimation()

protected resolveAnimation(referenceDuration?): ResolvedAnimation

Defined in: charts/src/core/chart.ts:203

Resolves the chart's animation options for a given reference duration (duration + easing + enabled).

Parameters

ParameterTypeDefault value
referenceDurationnumberANIMATION_REFERENCE.update

Returns

ResolvedAnimation

Inherited from

Chart.resolveAnimation


resolveSeriesColors()

protected resolveSeriesColors(series): void

Defined in: charts/src/core/chart.ts:321

Parameters

ParameterType
seriesobject[]

Returns

void

Inherited from

Chart.resolveSeriesColors


retain()

protected retain(value, key?): void

Defined in: core/src/core/disposer.ts:14

Registers a disposable resource under an optional key for later cleanup.

Parameters

ParameterTypeDefault value
valueDisposableundefined
keyPropertyKeyDisposer.defaultKey

Returns

void

Inherited from

Chart.retain


update()

update(options): void

Defined in: charts/src/core/chart.ts:179

Merges partial options into the current options and re-renders if autoRender is enabled.

Parameters

ParameterType
optionsPartial<TOptions>

Returns

void

Inherited from

Chart.update