import { Component } from '@angular/core';
import { WrBarChart } from 'ngwr/charts/bar-chart';
@Component({ imports: [WrBarChart] })
export class MyComponent {}Bar Chart
Vertical bars for one series of values.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic
<wr-bar-chart [data]="bars" />Tooltip
Set [tooltip]="false" to turn it off.
<wr-bar-chart [data]="bars" />
<wr-bar-chart [data]="bars" [tooltip]="false" />API
| Name | Description | Type | Default |
|---|---|---|---|
data | The bars, left to right. One series: a datum with no color of its own takes the chart's color, so by default every bar comes out the same. | readonly WrBarChartDatum[] | [] |
ariaLabel | Accessible name of the CHART. Falls back to barChart.label, then 'Bar chart'. Every bar already carries its own role="img" and its own "Mon: 12", and that is what the plot had instead of a name of its own — so the chart announced as whatever its first bar said, and a page with three bar charts offered a reader three images called by a weekday. The four sibling charts all name the plot; this one was the omission. | string | null | null |
color | Default bar colour when a datum has none. | string | primary |
showValues | Show value labels above each bar. | boolean | true |
height | Pixel height of the chart area. | number | 200 |
max | Explicit max value. 0 = auto. | number | 0 |
tooltip | Show a tooltip with the bar's label and value on hover. Pointer only — the column's accessible name already carries both. | boolean | true |
valueFormat | Writes every number the chart shows: the labels above the bars, the tooltip and each bar's accessible name. null uses Intl.NumberFormat in LOCALE_ID, with compact labels from a thousand up (1.2K, 3.4M). | ((value: number) => string) | null | null |
Types
interface WrBarChartDatum {
label: string;
value: number;
color?: string;
}| Name | Description | Type | Default |
|---|---|---|---|
WrBarChartDatum | One bar of data. | interface | — |
labelrequired | Category label under the bar. | string | — |
valuerequired | Bar magnitude. | number | — |
color | CSS colour for this bar. Unset, it takes the chart's color. | string | the chart’s `color` |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/charts/bar-chart's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-bar-chart-bar-radius | var(--wr-border-radius-sm) | .wr-bar-chart__bar |
--wr-bar-chart-column-gap | var(--wr-space-xs) | .wr-bar-chart__column |
--wr-bar-chart-font-family | var(--wr-font-family-base) | .wr-bar-chart |
--wr-bar-chart-label-font-size | var(--wr-text-xs) | .wr-bar-chart__label |
--wr-bar-chart-labels-gap | var(--wr-space-sm) | .wr-bar-chart__labels |
--wr-bar-chart-labels-margin-top | var(--wr-space-sm) | .wr-bar-chart__labels |
--wr-bar-chart-plot-border | var(--wr-border-base) | .wr-bar-chart__plot |
--wr-bar-chart-plot-gap | var(--wr-space-sm) | .wr-bar-chart__plot |
--wr-bar-chart-value-font-size | var(--wr-text-xs) | .wr-bar-chart__value |
--wr-bar-chart-value-line-height | var(--wr-leading-none) | .wr-bar-chart__value |
Dependencies
| Built on | Popover |
|---|
See also
Component Line ChartOne or more series of values as lines.Component Donut ChartParts of a whole as a ring or a pie.Component Meter GroupOne bar split into labelled parts, with a legend.Component SparklineA small trend line with no axes, to sit beside a number.Component PopoverShow a template, or a text tooltip, next to its trigger.