# Angular Range Bar Charts

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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/range-bar/overview/source.txt)

## Binding to Data

You can bind the Range Bar chart series to an array through the [`data`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#data) property in two formats:

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

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

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

  ```ts
  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`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#fromfield)         | `string`  | Yes\*    | The property name that contains the starting range value (\*required when binding to objects). |
  | [`toField`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#tofield)             | `string`  | Yes\*    | The property name that contains the ending range value (\*required when binding to objects).   |
  | [`categoryField`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#categoryfield) | `string`  | No       | The property name that contains the category with `string`, `date`, or `number` values.        |
  | [`colorField`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/range-bar/data-binding/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#gap) property as a percentage of the bar width. To control the distance between bars in a single category, set the [`spacing`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/range-bar/gap-spacing/source.txt)

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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/range-bar/spacing/source.txt)

## Support and Learning Resources

* [Range Bar Chart Homepage](https://www.telerik.com/kendo-angular-ui/charts#range-bar-chart)
* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui/components/charts/installation/getting-started)
* [API Reference of the Charts](https://www.telerik.com/kendo-angular-ui/components/charts/api)
* [Area Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/area)
* [Bar Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar)
* [Box Plot Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/box-plot)
* [Bullet Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bullet)
* [Line Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/line)
* [Radar Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/radar)
* [RangeArea Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/range-area)
* [Waterfall Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/waterfall)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)