New to Kendo UI for Angular? Start a free 30-day trial

Angular Bar and Column Charts

Updated on Jan 20, 2026

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.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Bar and Column chart series to an array through the 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.

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`	`string`	Yes*	The property name that contains the numeric value (*required when binding to objects).
`categoryField`	`string`	No	The property name that contains the category with `string`, `date`, or `number` values.
`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.

Change Theme

Theme

Loading ...

Sub-Types

The Bar and Column charts feature the following sub-types:

Column Charts
Stacked Bar and Column Charts
100% Stacked Bar and Column Charts

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 option.

The following example demonstrates a Column chart.

Change Theme

Theme

Loading ...

Stacked Bar and Column Charts

Stacked Bar and Column charts are suitable for indicating the proportion of individual values to the total. 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.

Change Theme

Theme

Loading ...

You can also place groups of series on separate stacks.

Change Theme

Theme

Loading ...

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. 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.

Change Theme

Theme

Loading ...

Gap and Spacing

You can control the distance between bars by using the gap and spacing properties.

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—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.

Change Theme

Theme

Loading ...

Angular Bar and Column Charts

Binding to Data

Sub-Types

Column Charts

Stacked Bar and Column Charts

100% Stacked Bar and Column

Gap and Spacing

Support and Learning Resources

Additional Resources