Bar Chart

Configurable to display a single, multi, and stacked group variants of vertical and horizontal bar charts. Add thresholds across all variants through a matching api.

Vertical, single group

Vertical, grouped

Vertical, stacked

Horizontal, single group

Horizontal, grouped

Horizontal, stacked

Horizontal, one series

Vertical, one series

Markup

Horizontal

<pcac-bar-horizontal-chart [config]="barHorizontalChartConfig" (barClicked)="onClicked($event)"></pcac-bar-horizontal-chart>

Vertical

<pcac-bar-vertical-chart [config]="barVerticalChartConfig" (barClicked)="onClicked($event)"></pcac-bar-vertical-chart>

API

import { PcacBarVerticalChart, PcacBarHorizontalChart } from '@pioneer-code/pioneer-charts';

Configuration

Name	Description
data	Collection of PcacData objects.
height	Height of chart component. Default is 200px.
ariaLabel	What the chart shows, for screen readers — e.g. `'Sales by month, 2026'`. The chart is announced as a group with this name, and each bar, slice or point inside it by its own key and value (see Accessibility). When omitted, its type is used: `'Bar chart'`, `'Pie chart'`, `'Line chart'` and so on.
heightFull	If true, height is treated as a minimum height and the chart grows to fill its container whenever that container is taller. Default is false. Give the element you wrap the chart in a definite height — an explicit height, or a flex/grid track that resolves to one. The chart stretches itself to fill it. If that wrapper is auto-height, there is nothing to fill and the chart falls back to height. The chart keeps filling as the container resizes, so this works with collapsing sidebars, tabs and window resizes.
xAxis / yAxis	Per-axis settings, one `PcacAxisConfig` for each axis. Every field is optional; omit the whole object for a default axis. See the Axis Styling guide for a live demo. hide — if true, the axis isn't drawn at all and the margins it would have occupied go to the plot (left and top for the y axis, bottom and right for the x axis); the chart's overall size doesn't change. Default false. showGrid — draw grid lines from this axis's ticks (or, on a category axis, from each category) across the plot: horizontal lines for the y axis, vertical for the x. Left unset, each chart keeps the grid it has always drawn — the y axis's on vertical bar and line/area/plot charts, the x axis's on the horizontal bar chart — and no other. Set it to turn either grid on or off. gridColor — any CSS color for this axis's grid lines, in place of the theme's `$gray-200`. Only shows while that grid is drawn (it doesn't turn the grid on). Applied as the `--pcac-grid-color` custom property on the grid group; a stylesheet can set the same property on an ancestor instead. ticks — requested number of ticks (a hint to D3, so the exact count can differ), and the number of grid lines. Ignored by a category axis, which has one tick per category. Default 5. tickSize — length in pixels of the small tick marks. Marks are not drawn unless this is set, so setting a size is also what turns them on (6 is D3's usual length); `0` keeps them off but pulls the labels in to the axis. Labels follow the marks and the chart's margins grow or shrink by the same amount, so the plot area shrinks to make room rather than pushing labels off the edge. Stroked with the theme's `$gray-900` via `.pcac-axis-tick-marks .tick line`, unless tickColor is set. tickColor — any CSS color for the tick marks. Only shows once tickSize has turned the marks on. Applied as `--pcac-axis-tick-color` on the axis group. tickLabelColor — any CSS color for the tick labels (the values along the axis), which otherwise follow the page's text color (`currentColor`). Applied as `--pcac-axis-tick-label-color` on the axis group. showLine — if true, draw a solid line along the axis itself (with D3's short end-caps). Independent of the tick marks. Default false. Stroked with the theme's `$gray-900` via `.pcac-axis-line .domain`, unless lineColor is set. lineColor — any CSS color for the axis line. Only shows with showLine on. Applied as `--pcac-axis-line-color` on the axis group. label — a title for the axis, drawn centered along it just inside the chart's edge (below the tick labels for the x axis; rotated to read bottom-to-top, left of them, for the y axis). The margin grows by 18px to make room, shrinking the plot area. Not drawn on a hidden axis. Styled by the theme's `.pcac-axis-label` rule. labelColor — any CSS color for the label, in place of the theme's `$gray-700`. Applied as `--pcac-axis-label-color` on the axis group. subLabels — `{ min?, mid?, max? }`: up to three short labels placed by position along the axis, in their own row just outside the tick labels (and inside the label, if there is one). min is aligned to the axis's start, mid centered, max to its end, so they never spill past the axis; on the y axis they read bottom-to-top with min at the bottom. The margin grows by 16px when any is set. Not drawn on a hidden axis. Styled by the theme's `.pcac-axis-sub-label` rule. subLabelColor — any CSS color for all of the subLabels, in place of the theme's `$gray-600`. Applied as `--pcac-axis-sub-label-color` on the axis group. format — a `PcacFormatEnum`: how this axis's values are shown in its tick labels and in the default tooltip, and on the line/area/plot charts' x axis also how a point's key maps to an x position. What each value does is chart-specific; see the rows below. Default None. Ignored by a category axis. domainMin / domainMax — the axis's domain, independent of the data. Defaults 0 and 100. Which axes read them is chart-specific (see the rows below): a bar chart's value axis reads only domainMax, and the line/area/plot charts' x axis reads them only under the Decimal and DateTime formats.
yAxis.domainMax xAxis.domainMax	Top of the value axis (yAxis on the vertical chart, xAxis on the horizontal one), which always starts at 0 - domainMin is ignored on the bar charts. Default 100. The category axis ignores both.
yAxis.format xAxis.format	Formats the value axis's tick labels and the value in the default tooltip (same axis as above). Percentage — values are fractions: `0.25` reads `25%` on the ticks and in the tooltip alike (so give a domainMax of 1). Decimal — plain numbers with thousands separators (`1,500`, `0.05`), with as many decimals as the tick step needs. Minutes — ticks get an `m` suffix. Fahrenheit — ticks and the tooltip get an `F` suffix. Anything else (the default) leaves the ticks and tooltip unformatted.
isStacked	If false (the default), each group's bars are drawn side by side. If true, they are stacked: each bar's value is its own segment size, and segments are placed on top of one another in data order, so a group's total height is the sum of its values. Keep the value axis's domainMax at or above the largest group total.
thresholds	Threshold markers, configured with the same PcacData structure as the data; each one's value is where it's drawn on the value axis. How many levels you give decides what each threshold spans: Empty (the default) — no thresholds. One entry with an empty data — a single threshold across the whole chart. One entry per group, each with an empty data — a threshold per group, spanning that group's bars. One entry per group, each with an entry per bar in its data — a threshold per bar. On a stacked chart, whose groups are one bar each, the first entry in each group's data is that group's threshold. A group or bar without an entry, or with no numeric value, simply has no threshold. A hovered threshold shows its value in the tooltip, and a custom tooltip template can tell it from a bar via isThreshold.
spreadColorsPerGroup	If true, colors are assigned per group (every bar in a group shares its group's color) instead of per bar within a group. Default false.
colorOverride	Hex colors (with the leading `#`), used in order instead of the theme palette: the first series takes the first color (or, with spreadColorsPerGroup, the first group). Repeated when there are fewer colors than series. Omitted or empty, the theme palette is used.

Events

Binding	Description	Payload
(barClicked)="service.onClicked($event)"	Emitted when a bar in the graph is clicked.	PcacData