# Angular Bar and Column Charts

Angular Bar Charts are suitable for displaying a comparison between several sets of data—for example, for showing a summary of unique and total site visitors over a certain period of time. The series are placed next to each other with predefined spacing between them.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/bar/overview/source.txt)

## Binding to Data

You can bind the Bar and Column chart series to an array through the [`data`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#data) property in three formats:

* Binding to numbers—Use a simple array of numeric values where each number represents a data point value. The chart auto-generates categories.

  ```ts
  public data: number[] = [10, 25, 15, 30, 20];
  ```

* Binding to arrays—Use arrays of `[value, category]` pairs where the first element is the data point value and the second element is the category name.

  ```ts
  public data: [number, string][] = [[10, 'Jan'], [25, 'Feb'], [15, 'Mar']];
  ```

* Binding to objects—Use an array of objects with custom properties.

  ```ts
  public data: Array<{ value: number; category: string; color?: string }> = [
      { value: 10, category: 'Jan', color: '#ff6358' },
      { value: 25, category: 'Feb', color: '#ffd246' },
      { value: 15, category: 'Mar', color: '#28b4c8' }
  ];
  ```

  When binding to objects, specify which properties contain the data through the following field mappings:

  | Property                                                                                                            | Data type | Required | Description                                                                             |
  | ------------------------------------------------------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------- |
  | [`field`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#field)                 | `string`  | Yes\*    | The property name that contains the numeric value (\*required when binding to objects). |
  | [`categoryField`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#categoryfield) | `string`  | No       | The property name that contains the category with `string`, `date`, or `number` values. |
  | [`colorField`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#colorfield)       | `string`  | No       | The property name that contains the color with `string` values.                         |

The following example demonstrates how to bind the Bar chart series to data using object models.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/bar/data-binding/source.txt)

### Binding Multiple Series to Data

To compare data across multiple categories, bind multiple `kendo-chart-series-item` elements to different data arrays. All series share the same category axis, which you define through the `kendo-chart-category-axis-item`.

The following example demonstrates a multi-series Bar chart comparing three sales channels across regions.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/bar/multi-series/source.txt)

> tip Use the `format` property of `kendo-chart-value-axis-item` to format axis labels as currency (`'C0'`), percentages (`'P0'`), or other numeric formats. This prevents the chart from displaying raw numbers that are hard to read.

## Orientation and Stacking

Bar and Column charts share the same data model but differ in orientation and stacking behavior.

| Type                                                                                                                   | `type` value                                         | Description                                                             |
| ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------- |
| [Bar](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar#bar-charts)                          | `'bar'`                                              | Horizontal bars. Use when category labels are long or data is ranked.   |
| [Column](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar#column-charts)                    | `'column'`                                           | Vertical bars. Use for comparing values across discrete categories.     |
| [Stacked](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar#stacked-bar-and-column-charts)   | `'bar'` or `'column'` with `stack: true`             | Stacks series on top of each other to show part-to-whole relationships. |
| [100% Stacked](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar#100-stacked-bar-and-column) | `'bar'` or `'column'` with `stack: { type: '100%' }` | Normalizes stacked values to percentages of the total.                  |

### Bar Charts

Bar charts render horizontal bars where the category axis is horizontal and the value axis is vertical. Use Bar charts when category labels are long or when showing ranked data where the natural reading direction is top-to-bottom.

To create a Bar chart, set the series type to `bar` using the [`type`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#type) option.

The following example demonstrates a basic Bar chart.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/bar/basic/source.txt)

### Column Charts

Column charts transpose the axes—the category axis is vertical and the value axis is horizontal. Column charts are functionally equivalent to Bar charts.

To create a Column chart, set the series type to `column` using the [`type`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#type) option.

The following example demonstrates a Column chart.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/bar/column/source.txt)

> tip You can combine `bar` or `column` series with other categorical series types such as [`line`](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/line) and [`area`](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/area) in the same chart. A common technique is overlaying a line series on a column chart to display a trend alongside discrete category values.

### Stacked Bar and Column Charts

Stacked Bar and Column charts are suitable for indicating the proportion of individual values to the total. Use this sub-type when you need to show how parts contribute to a whole while preserving the absolute values. To select this series sub-type, set the `stack` property of the first series item to `true`. The setting of the `stack` property is applied to all series and you do not have to set the rest of the series explicitly. Yet, you can override the configuration per series.

Series are plotted on top of each other. The stack value is the sum of all values up until the current series. Negative values are placed on a separate stack.

The following example demonstrates a Stacked Bar chart.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/bar/stacked/source.txt)

You can also place groups of series on separate stacks.

The following example demonstrates Stacked Bar groups.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/bar/stacked-groups/source.txt)

### 100% Stacked Bar and Column

100% Stacked Bar and Column charts are suitable for indicating the proportion of individual values as a percentage of the total. Use this sub-type when the relative distribution matters more than the absolute values—for example, to show market share or survey response breakdowns. To select this series sub-type, set the `stack` property of the first series item to a `{ type: '100%' }` object. The setting of the `stack` property is applied to all series and you do not have to set the rest of the series explicitly. Yet, you can override the configuration per series.

> While it is possible to plot negative values in a 100% stacked chart, the results are hard for the user to interpret.

The following example demonstrates how the series data is converted into percentages.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/bar/fully-stacked/source.txt)

## Gap and Spacing

You can control the distance between bars by using the [`gap`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#gap) and [`spacing`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#spacing) properties.

* [`gap`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#gap)—Sets the distance between categories as a percentage of the bar width. Larger values create wider gaps between the bar groups. Set the `gap` property on the first series item and it applies to all series automatically.

* [`spacing`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#spacing)—Sets the distance between bars within a single category as a percentage of the bar width. Positive values add space between bars, while negative values overlap them. Set the `spacing` property on the first series item and it applies to all series automatically.

The following example demonstrates how to control the gap and spacing between bars.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/bar/gap-spacing/source.txt)

## Support and Learning Resources

* [Bar and Column Chart Homepage](https://www.telerik.com/kendo-angular-ui/charts#bar-and-column-chart)
* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui/components/charts/installation/getting-started)
* [API Reference of the Charts](https://www.telerik.com/kendo-angular-ui/components/charts/api)
* [Area Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/area)
* [Box Plot Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/box-plot)
* [Bullet Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bullet)
* [Line Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/line)
* [Radar Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/radar)
* [RangeArea Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/range-area)
* [RangeBar Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/range-bar)
* [Waterfall Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/waterfall)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)