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

Angular Bar and Column Charts

Updated on Dec 12, 2025

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.

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 variables. To control the distance between the categories, set gap to the first series item as a percentage of the bar width. The setting of the gap property is applied to all series and you do not have to set the rest of the series explicitly.

The following example demonstrates how to control the distance between bars.

Change Theme

Theme

Loading ...

To control the distance between bars in a single category, set spacing to the first series item as a percentage of the bar width. The setting of the spacing property is applied to all series and you do not have to set the rest of the series explicitly.

The following example demonstrates how to control the distance between bars in a single category.

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