Skip to main content

<BarChart>

component@pond-ts/chartssource

A bar / histogram draw layer. In its simplest form, one rectangle per event spanning the key's [begin, end] from the axis baseline to a numeric column's value (see below). It also draws stacked bars (a group-by dimension → segments, columns / a Map series / bins) and horizontal bars (orientation='horizontal', bins on the y axis) — first-class histogram support. Registers into the enclosing Layers and renders nothing to the DOM; the row draws it.

Data sources. A time / value TimeSeries or ValueSeries (column), a wide series or bins array (columns), or a Map<group, TimeSeries> (column) — the last three stack. Every shape composes from pond's own aggregation (aggregate / byColumn / partitionBy); the histogram guide has the recipes.

Baseline (single, vertical). Bars rest on the zero line when the axis domain spans zero, or on the axis floor when an explicit <YAxis min> sits above zero (see resolveBarBaseline).

Baseline (stacked). A stack is cumulative from value 0 — so its value axis must include 0. The auto-fit guarantees this: stackValueExtent returns [minNegativeTotal, maxPositiveTotal], both seeded at 0. An explicit <YAxis min> above 0 is therefore unsupported for a stack — it would hide the bottom of the cumulative column; only the portion above the floor draws (clipped cleanly at the plot floor, as any bar below an explicit floor is).

Signed stacks are supported ([PND-SIGNSTACK]): each bin keeps two running totals, so positive segments stack up from the zero line and negative ones stack down from it — the signed histogram (net flow by category, inflow/outflow, buy/sell pressure by venue). A zero segment is still skipped, having no extent to draw or hit-test. This changed in the threshold-banding wave: negative segments were previously dropped outright and silently, so a mixed-sign series rendered as an all-positive chart.

Interaction (opt-in via id). Hover lights the bar / segment under the cursor (hit-tested by pixel rect, so it works in both orientations); click selects it (outlined). A stacked segment's identity is (id, key = bin begin, label = group). Both channels are controllable from outside via the container (selected/onSelect, hovered/onHover). The in-chart flag/crosshair value cursor is single-series-vertical only.

<Layers>
  <BarChart series={hourlyVolume} column="count" />
  <BarChart series={byHost} column="n" colors={{ web1: '#…' }} />
  <BarChart bins={powerDist} column="seconds" orientation="horizontal" ordinal />
</Layers>

Props