# Angular Range Area Charts Range Area charts display the area between minimum and maximum values across categories. Use them to visualize temperature ranges, stock price fluctuations, or confidence intervals in your data. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/range-area/overview/source.txt) ## Binding to Data You can bind the Range Area chart series to an array through the [`data`](https://www.telerik.com/kendo-angular-ui-develop/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-develop/components/charts/api/seriesitemcomponent#fromfield) | `string` | Yes\* | The property name that contains the lower range value with `number` or `date` values (\*required when binding to objects). | | [`toField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#tofield) | `string` | Yes\* | The property name that contains the upper range value with `number` or `date` values (\*required when binding to objects). | | [`categoryField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#categoryfield) | `string` | No | The property name that contains the category with `string`, `date`, or `number` values. | The following example demonstrates how to bind the Range Area chart series to data using object models. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/range-area/data-binding/source.txt) ## Vertical Range Area Chart The Range Area chart supports vertical orientation through the `verticalRangeArea` [`series type`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#type). The vertical Range Area chart displays the same data as the horizontal version but rotates the visualization 90 degrees, making it suitable for layouts where vertical space is preferred or when you want to emphasize the category progression from bottom to top. The following example demonstrates how to create a vertical Range Area chart. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/range-area/vertical/source.txt) ## Customizing the Appearance You can customize the visual appearance of the Range Area chart through several styling properties: * [`color`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#color)—Specifies the fill color of the range area. * [`opacity`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#opacity)—Controls the transparency of the area fill (0 to 1). * [`line`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#line)—Configures the line properties, including width and style through the [`SeriesLine`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesline) configuration. * [`border`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#border)—Sets the border appearance, including color and width. The following example demonstrates how to customize the appearance of Range Area charts with different styling options. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/range-area/customization/source.txt) ## Support and Learning Resources * [Range Area Chart Homepage](https://www.telerik.com/kendo-angular-ui/charts#range-area-chart) * [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started) * [API Reference of the Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api) * [Area Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/area) * [Bar Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/bar) * [Box Plot Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/box-plot) * [Bullet Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/bullet) * [Line Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/line) * [Radar Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/radar) * [Waterfall Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/waterfall) * [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/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-develop/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-develop/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)