New to Kendo UI for AngularStart 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.

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

Support and Learning Resources

Additional Resources