Chart

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

Abstract base class for every chart in pixi-charts.

Responsibilities of this class — and ONLY these:

1. Hold the lifecycle: new Chart() → await chart.init() → ... → chart.destroy(). The constructor is intentionally side-effect-free. Nothing renders, no PIXI application is created, until init is called.
2. Own and manage a single PIXI Application.
3. Observe the container for size changes and forward them to the renderer.
4. Track tween cancel functions registered via addTween so they can all be cancelled when the chart is destroyed.
5. Clean up everything in destroy, idempotently, without requiring the user to know which steps initialised.
6. Orchestrate the render / update / resize flow as a single code path: each enters via render, which cancels active tweens, calls the subclass’s onBeforeUpdate hook, runs lazy ensureSetup, and then drives the subclass-specific redrawData.

Subclasses implement redrawData (and usually replaceData, onBeforeUpdate, and ensureSetup). Anything chart-type- specific — axes, legend, tooltip, data marshalling — composes out of small modules rather than extending this class further.

Chart is abstract — instantiate a concrete subclass (e.g. import(’../charts/LineChart.js’).LineChart) or, in most cases, use the declarative import(’../spec/render.js’).render entry point which returns a Chart already constructed and initialised.

Example

import { LineChart } from 'pixi-charts';

const chart = new LineChart({ container, spec });
await chart.init();           // creates the PIXI app and does the first render

// ...later, swap data without recreating the WebGL context
chart.update(newRows);

chart.destroy();              // idempotent — safe to call more than once

Extended by

• LineChart
• AreaChart
• BarChart
• ScatterChart
• HeatmapChart
• PieChart

Constructors

Constructor

new Chart(opts): Chart

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

Parameters

opts

ChartOptions

Returns

Chart

Accessors

destroyed

Get Signature

get destroyed(): boolean

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

true once destroy has run.

Returns

boolean

---

initialized

Get Signature

get initialized(): boolean

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

true once init has completed.

Returns

boolean

Methods

destroy()

destroy(): void

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

Releases every resource owned by this chart:

• Cancels all tracked tweens.
• Disconnects the ResizeObserver.
• Destroys the PIXI Application (and removes its canvas from the DOM).
• Nulls internal references so the GC can collect them.

Idempotent — calling more than once is safe and does no extra work.

Returns

void

---

init()

init(): Promise<void>

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

Creates the PIXI Application, attaches its canvas to the container, and starts observing the container for size changes.

PIXI v8 requires await app.init(...) — this is why initialisation is separate from construction. After this resolves, render may be called by the subclass (or by the user).

Calling init() more than once is a no-op.

Returns

Promise<void>

---

off()

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.

Parameters

_event

"click"

handler

ChartEventHandler

Returns

void

---

on()

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.

Parameters

_event

"click"

handler

ChartEventHandler

Returns

() => void

Example

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

---

update()

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.

Parameters

newData

readonly Record<string, unknown>[]

options?

UpdateOptions

Returns

void

Throws

If called before init has resolved.

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