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

Range Bar

Range Bar charts are categorical charts, which represent a variation of the Bar charts.

Basics

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

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

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

Support and Learning Resources

Additional Resources