# Bar Chart

> Vertical bars, one series. Per-bar color overrides via the `color` field.

Source: https://ngwr.dev/reference/components/bar-chart  
Kind: Component

## Installation

```angular-ts
import { WrBarChart } from 'ngwr/bar-chart';

@Component({ imports: [WrBarChart] })
export class MyComponent {
  protected readonly bars = [
    { label: 'Mon', value: 12 },
    { label: 'Tue', value: 18, color: 'var(--wr-color-success)' },
    { label: 'Wed', value: 9 },
    { label: 'Thu', value: 24, color: 'var(--wr-color-warning)' },
    { label: 'Fri', value: 17 },
    { label: 'Sat', value: 6 },
    { label: 'Sun', value: 11 },
  ];
}
```

## Basic

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

## API

Inputs of \<wr-bar-chart>.

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `data` | — | `readonly WrBarChartDatum[]` | `[]` |
| `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` |

## Types

Data shapes used by the inputs and outputs above.

```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 color for the bar. | `string` | `palette` |