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

Angular Range Bar Charts

Updated on Aug 14, 2026

Range Bar charts display data as horizontal bars where each bar represents a value range spanning between minimum and maximum levels. Use them to visualize duration, resource allocation, or any data requiring horizontal range representation.

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.

Loading ...

Gap and Spacing

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

To control the distance between categories, set the gap property as a percentage of the bar width. To control the distance between bars in a single category, set the spacing property as a percentage of the bar width. The settings apply to all series.

The following example demonstrates how to adjust gap and spacing in Range Bar charts using interactive controls.

Loading ...

The spacing property set on the first series item applies to all series in the same category. You do not have to set the property on each series explicitly.

The following example demonstrates how to set the spacing between bars in a Range Bar chart.

Loading ...

Angular Range Bar Charts

Binding to Data

Gap and Spacing

Support and Learning Resources

Additional Resources