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

Angular Bar and Column Charts

Updated on Jul 8, 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 ...

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.

Change Theme

Theme

Loading ...

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	`'bar'`	Horizontal bars. Use when category labels are long or data is ranked.
Column	`'column'`	Vertical bars. Use for comparing values across discrete categories.
Stacked	`'bar'` or `'column'` with `stack: true`	Stacks series on top of each other to show part-to-whole relationships.
100% Stacked	`'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 option.

The following example demonstrates a basic Bar chart.

Change Theme

Theme

Loading ...

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

You can combine bar or column series with other categorical series types such as line and 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.

Change Theme

Theme

Loading ...

You can also place groups of series on separate stacks.

The following example demonstrates Stacked Bar groups.

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

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

Binding Multiple Series to Data

Orientation and Stacking

Bar Charts

Column Charts

Stacked Bar and Column Charts

100% Stacked Bar and Column

Gap and Spacing

Support and Learning Resources

Additional Resources