Skip to content

AreaChart

Defined in: packages/pixi-charts/src/charts/AreaChart.ts:86

Area chart — a filled region between each series’ line and a zero baseline, with a stroked top edge.

Shares the entire data + scale layer with import(’./LineChart.js’).LineChart via charts/_shared/cartesian.ts (series grouping, downsampling, scale / adapter / axis construction, hit-testing, tooltip formatting). Both classes extend Chart directly — composition, not inheritance. Only the drawing differs: a closed polygon (fill + top-edge stroke) rather than a bare stroke.

Lifecycle and updates. Construction is pure. The first render runs at the tail of init. Chart.update reuses the PIXI Application, axes, legend, and interaction layer; only data-derived geometry is recomputed. update({ animate: true }) currently snaps; tweening area geometry across changing point counts requires diffing.

Baseline. The fill closes along yAdapter.scale(0) — zero projected through the y-adapter, not plotHeight. When the y-domain doesn’t include zero it is anchored at the plot bottom; when it crosses zero the baseline sits mid-plot. The hit-tester is the shared cartesian one, so the tooltip reports the point on the top edge (areas are not expected to hit-test the filled body).

Known gap — stacking. Multi-series areas are drawn in order and overlap, with AREA_FILL_ALPHA keeping overlaps readable. Stacked areas (cumulative baselines) are a future feature with their own design decisions and are intentionally not implemented here.

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

new AreaChart(opts): AreaChart

Defined in: packages/pixi-charts/src/charts/AreaChart.ts:121

AreaChartOptions

AreaChart

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/AreaChart.ts:146

Destroy every owned primitive in addition to the base-class teardown. Idempotent.

void

Chart.destroy


init(): Promise<void>

Defined in: packages/pixi-charts/src/charts/AreaChart.ts:135

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

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