---
title: "Series Bars"
framework: angular
version: "14.1.0"
---

# Series Bars

Data points can be represented by vertical or horizontal bars in many series types, such as [Bar](https://www.ag-grid.com/charts/angular/bar-series/), [Range Bar](https://www.ag-grid.com/charts/angular/range-bar-series/), [Waterfall](https://www.ag-grid.com/charts/angular/waterfall-series/) and [Box Plot](https://www.ag-grid.com/charts/angular/box-plot-series/).

Styling and customisation options such as `fill`, `stroke` and `cornerRadius` are configurable within each series. See [API Reference](#api-reference) for details.

## Fixed Width

Use the `width` option to set a fixed pixel width for each bar.

#### Fixed Width

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Fixed Width](https://www.ag-grid.com/charts/angular/bars/examples/fixed-width-clipping)

```js
{
    series: [
        {
            type: 'bar',
            width: 30,
        },
    ],
}
```

In this example:

- Each bar in the series has a fixed width of 30 pixels.
- Toggle the fixed width off to let bars automatically size to fit the series area.
- Use the slider to change the width in pixels.

When using fixed width bars:

- Resizing the chart does not affect the width of the bars.
- The bars will be clipped if the fixed width exceeds the available space in the series area.
- Clipped bars can be viewed using the [Scrollbar](https://www.ag-grid.com/charts/angular/scrollbar/), [Navigator](https://www.ag-grid.com/charts/angular/navigator/) or [Zoom](https://www.ag-grid.com/charts/angular/zoom/) controls.

### Band Alignment

Use the `bandAlignment` option on a [Category](https://www.ag-grid.com/charts/angular/axes-types/#category), [Unit Time](https://www.ag-grid.com/charts/angular/axes-time/#unit-time) or [Ordinal Time](https://www.ag-grid.com/charts/angular/axes-time/#ordinal-time) axis to align fixed width bars.

#### Band Alignment

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Band Alignment](https://www.ag-grid.com/charts/angular/bars/examples/band-alignment)

```js
{
    axes: {
        x: {
            type: 'category',
            bandAlignment: 'start',
        },
    },
}
```

In this example:

- The category axis has an initial band alignment of `start`.
- Use the buttons to compare other band alignment options.
  - `justify` - bands are sized to fill the chart width, with the bars centred within each band.
  - `start` - bands are sized to fit the bar width and aligned to the start of the axis.
  - `center` - bands are sized to fit the bar width and centred within the chart width.
  - `end` - bands are sized to fit the bar width and aligned to the end of the axis.

## Width Ratio

Use the `widthRatio` option to set the bar width as a proportion of the default width.

#### Width Ratio

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Width Ratio](https://www.ag-grid.com/charts/angular/bars/examples/width-ratio)

```js
{
    series: [
        {
            type: 'range-bar',
            grouped: false,
            widthRatio: 0.4,
        },
    ],
}
```

In this example:

- The World series uses the default width ratio of 1.
- The Australia series has an initial width ratio of 0.4.
- Use the slider to change the width ratio.
- This gives an [Actual vs Target](#actual-vs-target-bars) style visualisation, with the "World" series as a background reference.

## Actual vs Target Bars

Bars can be layered to create actual vs target comparisons by using `grouped: false` to overlay series.

#### Actual vs Target

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Actual vs Target](https://www.ag-grid.com/charts/angular/bars/examples/actual-target)

```js
{
    series: [
        {
            type: 'bar',
            yKey: 'target',
            grouped: false,
            fillOpacity: 0.3,
        },
        {
            type: 'bar',
            yKey: 'actual',
            grouped: false,
            widthRatio: 0.5,
        },
    ],
}
```

In this example:

- The Target series uses `grouped: false` to span the full category width as a background bar.
- The Actual series also uses `grouped: false` with a `widthRatio` of 0.5 to appear narrower in front.
- The Target series is specified first in the `series` array so that it appears behind the Actual series.
- The target has reduced `fillOpacity` and highlighting disabled.

### Multiple Metrics

Multiple grouped series can be displayed over a single ungrouped target bar.

#### Multiple Metrics vs Target

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Multiple Metrics vs Target](https://www.ag-grid.com/charts/angular/bars/examples/targets-comparisons)

In this example:

- The "Target" series is ungrouped and spans the full category width as a background reference.
- The "Europe" and "Asia" series are grouped by default, sharing their portion of the category width.
- When a series has `grouped: false`, its `widthRatio` is relative to the full category width.
- When `grouped: true` (the default), `widthRatio` is relative to the automatically calculated width allocated to each series within group.

## Skip Null Bars

Use the `skipNullBars` option on a [Category](https://www.ag-grid.com/charts/angular/axes-types/#category), [Unit Time](https://www.ag-grid.com/charts/angular/axes-time/#unit-time) or [Ordinal Time](https://www.ag-grid.com/charts/angular/axes-time/#ordinal-time) axis to prevent bars with `null`, `undefined` or missing values from taking up space within each category band. This also closes the gap when a series supplies its own `data` array and a category is absent from it.

#### Skip Null Bars

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Skip Null Bars](https://www.ag-grid.com/charts/angular/bars/examples/skip-null-bars)

```js
{
    axes: {
        x: {
            type: 'category',
            skipNullBars: true,
        },
    },
}
```

In this example:

- Various values in the data are set to `null`, `undefined` or missing.
- When an axis has `skipNullBars: true`, bars with `null`, `undefined` or missing values are not represented on the chart.
- Toggle between "Skip Null Bars" and "Show Null Bars" to compare the difference.

## API Reference

#### Bar Options

These properties are common to [Bar](https://www.ag-grid.com/charts/angular/bar-series/), [Range Bar](https://www.ag-grid.com/charts/angular/range-bar-series/), [Waterfall](https://www.ag-grid.com/charts/angular/waterfall-series/) and [Box Plot](https://www.ag-grid.com/charts/angular/box-plot-series/) series types.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| width | PixelSize |  | Fixed width of each bar in the series. |
| widthRatio | Ratio |  | Ratio of the bandwidth (or specified width) to use for the width for each bar in the series. |
| cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| fillOpacity | Opacity |  | The opacity of the fill colour. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |

#### Band Alignment

This property is available on [Category](https://www.ag-grid.com/charts/angular/axes-types/#category), [Ordinal Time](https://www.ag-grid.com/charts/angular/axes-time/#ordinal-time) and [Unit Time](https://www.ag-grid.com/charts/angular/axes-time/#unit-time) axes.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| bandAlignment | 'justify' \| 'start' \| 'center' \| 'end' | 'justify' | The alignment of bands when used with bar-like series with fixed widths. |

#### Skip Null Bars

This property is available on [Category](https://www.ag-grid.com/charts/angular/axes-types/#category), [Ordinal Time](https://www.ag-grid.com/charts/angular/axes-time/#ordinal-time) and [Unit Time](https://www.ag-grid.com/charts/angular/axes-time/#unit-time) axes.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| skipNullBars | boolean | false | Set to `true` to prevent bars with `null`, `undefined` or missing values from taking up space in each category. |