# Angular Area and Vertical Area Charts Area charts and Vertical Area charts are categorical charts that display quantitative data using continuous lines passing through points defined by item values. The portion of the graph beneath the lines is filled with a particular color for each series. The different colors in an Area Chart are useful for emphasizing changes in values, which come from several sets of similar data. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/area/overview/source.txt) ## Binding to Data You can bind the Area chart series to an array through the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#data) property in three formats: * Binding to numbers—Use a simple array of numeric values where each number represents a data point value. The chart auto-generates categories. ```ts public data: number[] = [10, 25, 15, 30, 20]; ``` * Binding to arrays—Use arrays of `[value, category]` pairs where the first element is the data point value and the second element is the category name. ```ts public data: [number, string][] = [[10, 'Jan'], [25, 'Feb'], [15, 'Mar']]; ``` * Binding to objects—Use an array of objects with custom properties. ```ts public data: Array<{ value: number; category: string }> = [ { value: 10, category: 'Jan' }, { value: 25, category: 'Feb' }, { value: 15, category: 'Mar' } ]; ``` When binding to objects, specify which properties contain the data through the following field mappings: | Property | Data type | Required | Description | | --------------------------------------------------------------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------- | | [`field`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#field) | `string` | Yes\* | The property name that contains the numeric value (\*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 Area chart series to data using object models. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/area/data-binding/source.txt) ## Sub-Types The Area chart features the following sub-types: * [Vertical Area Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/area#vertical-area-charts) * [Stacked Area Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/area#stacked-area-charts) * [100% Stacked Area Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/area#100-stacked-area-charts) ### Vertical Area Charts Vertical Area charts transpose the axes—the category axis is vertical and the value axis is horizontal. Vertical Area charts are functionally equivalent to Area charts. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/area/vertical/source.txt) ### Stacked Area Charts Stacked Area Charts are suitable for indicating the proportion of individual values to the total. To select this series sub-type, set the [`stack`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent) property of the first series item to `true`. The setting of the `stack` property is applied to all series and you do not have to set the rest of the series explicitly. The following example demonstrates how to stack the red and green series on top of each other. The blue series contains positive and zero values as well as a negative one. In all cases, the plotted value is the sum of all values up to the current series. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/area/stacked/source.txt) ### 100% Stacked Area Charts 100% Stacked Area Charts are suitable for indicating the proportion of individual values as a percentage of the total. To select this series sub-type, set the [`stack`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent) property of the first series item to a `{ type: '100%' }` object. The setting of the `stack` property is applied to all series and you do not have to set the rest of the series explicitly. > While it is possible to plot negative values in a 100% stacked chart, the results are hard for the user to interpret. The following example demonstrates how the series data is converted into percentages. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/area/fully-stacked/source.txt) ## Angular Area Chart Line Style Angular Area Charts enable you to render the lines between the points in different styles. To set the appearance of the lines, use the [`line.style`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesline#style) option which provides the following available styles: * Normal—The default style, which produces a straight line between data points. * Step—The style renders the connection between the data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes. * Smooth—The style causes the Angular Area Chart to display a fitted curve through data points. It is suitable for displaying data with a curve and connecting the points with smooth instead of straight lines. The following Angular Area Chart example demonstrates how to use the different types of lines. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/area/line/source.txt) ## Support and Learning Resources * [Area and Vertical Area Chart Homepage](https://www.telerik.com/kendo-angular-ui/charts#area-and-vertical-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) * [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) * [RangeArea Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/range-area) * [RangeBar Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/range-bar) * [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)