# Bar Chart

> Vertical bars for one series of values.

Source: https://ngwr.dev/charts/bar-chart  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrBarChart } from 'ngwr/charts/bar-chart';

@Component({ imports: [WrBarChart] })
export class MyComponent {}
```

```scss
@use 'ngwr/charts/bar-chart';
```

## Basic

```angular-html
<wr-bar-chart [data]="bars" />
```

## Tooltip

Set `[tooltip]="false"` to turn it off.

```angular-html
<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

```angular-ts
interface WrBarChartDatum {
  label: string;
  value: number;
  color?: string;
}
```

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `WrBarChartDatum` | One bar of data. | `interface` | — |
| `label`required | Category label under the bar. | `string` | — |
| `value`required | 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](https://ngwr.dev/reference/components/popover) |
| --- | --- |

## See also

- [Line Chart](https://ngwr.dev/charts/line-chart) — One or more series of values as lines.
- [Donut Chart](https://ngwr.dev/charts/donut-chart) — Parts of a whole as a ring or a pie.
- [Meter Group](https://ngwr.dev/charts/meter-group) — One bar split into labelled parts, with a legend.
- [Sparkline](https://ngwr.dev/charts/sparkline) — A small trend line with no axes, to sit beside a number.
- [Popover](https://ngwr.dev/reference/components/popover) — Show a template, or a text tooltip, next to its trigger.