Skip to content

LineChart

Defined in: packages/pixi-charts/src/charts/LineChart.ts:101

Line chart — the first end-to-end chart in pixi-charts.

Composes the v1 primitive set: two Axis instances wrapped over ScaleAdapter adapters, an optional Legend (for categorical color encoding with multiple series), an optional Tooltip attached to the container, and an InteractionLayer fed a chart-specific hit-tester.

The data + scale layer (series grouping, downsampling, scale/adapter/axis construction, hit-testing, tooltip formatting) is shared with import(’./AreaChart.js’).AreaChart via plain functions in charts/_shared/cartesian.ts. LineChart still extends Chart directly — composition, not inheritance.

Lifecycle and updates. Construction is pure. The first render runs at the tail of init so the spec dispatcher hands consumers a fully-rendered chart back. Chart.update swaps the data and recomputes scales, geometry, axes, and the hit-tester — the PIXI Application, axes, legend, and interaction layer are all reused (no GL re-init, no DOM churn).

Update animation. update({ animate: true }) currently snaps; tweening line geometry across changing point counts requires diffing and is deferred.

Hit-testing strategy. Built using the ScaleAdapter’s kind discriminator. Continuous adapters (linear, time) use invert() to map the pointer’s x back to the domain, then find the nearest datum within HIT_TEST_RADIUS_PX. Band adapters iterate the domain to find the band the pointer falls inside. Across multiple series, the closest point in pixel space wins.

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

new LineChart(opts): LineChart

Defined in: packages/pixi-charts/src/charts/LineChart.ts:136

LineChartOptions

LineChart

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/LineChart.ts:161

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/LineChart.ts:150

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