Skip to content

BarChart

Defined in: packages/pixi-charts/src/charts/BarChart.ts:149

Bar chart — single series, vertical or horizontal.

One class, two orientations. A horizontal bar chart is a vertical one with the axes swapped: same data, same encoding, same hit-testing — only which axis carries the band scale differs. options.orientation ('vertical' default, or 'horizontal') selects the layout; everything else is a single branch in the scale-setup and drawing code. See ChartOptions.orientation for the user-facing contract.

Single series. Grouped and stacked bars are out of scope here (Session 7+). The encoding.color channel here controls per-bar color, not a series split: with no color encoding every bar takes the default scheme’s first color; with a categorical color encoding each bar is colored by its color-field value (so coloring by the category field — the common case — yields one color per bar). Above COLOR_GROUP_WARN_THRESHOLD distinct color values a console.warn fires (palettes wrap and colors repeat).

Lifecycle / resize / update. Construction is pure. The first render runs at the tail of init(). Resize and Chart.update both flow through the base class’s render orchestrator, which reuses the persistent PIXI containers, axes, legend, interaction layer, and tooltip — only the data-dependent state (records, scale domains, axis ticks, bar geometry, hit-tester backing) is recomputed.

Baseline. Bars grow from valueAdapter.scale(0) — zero projected through the value scale, not an assumed plot edge. Negative values grow the opposite side of that baseline; a domain that doesn’t include zero still projects a correct (possibly off-plot) baseline. Same correctness point import(’./AreaChart.js’).AreaChart established.

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

new BarChart(opts): BarChart

Defined in: packages/pixi-charts/src/charts/BarChart.ts:199

BarChartOptions

BarChart

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/BarChart.ts:226

Destroy every owned primitive in addition to the base-class teardown. Idempotent — the base class guards a second call, and 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/BarChart.ts:214

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