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

Range Bar

Updated on Dec 12, 2025

Range Bar charts display data as bars where each bar represents a value range that spans between its minimum and maximum levels. Unlike standard Bar charts, which have bars anchored to their X axis, Range Bar charts render floating bars.

The following example demonstrates the Angular Range Bar chart in action.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Range Bar chart series to an array through the data property in two formats:

Binding to arrays—Use arrays of [from, to] pairs.

public data: [number, number][] = [[5, 15], [10, 25], [8, 18]];

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

public data: Array<{ from: number; to: number; category: string }> = [
    { from: 5, to: 15, category: 'Jan' },
    { from: 10, to: 25, category: 'Feb' },
    { from: 8, to: 18, category: 'Mar' }
];

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

Property	Data type	Required	Description
`fromField`	`string`	Yes*	The property name that contains the starting range value (*required when binding to objects).
`toField`	`string`	Yes*	The property name that contains the ending range 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 Range Bar chart series to data using object models.

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.

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.

Change Theme

Theme

Loading ...

Range Bar

Binding to Data

Gap and Spacing

Support and Learning Resources

Additional Resources