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

Range Area

Updated on Dec 12, 2025

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

Unlike the Area chart, which is filled to the axis, the Range Area chart is filled between its minimum and maximum values.

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

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Range Area chart series to an array through the data property in two formats:

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

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

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

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`	`string`	Yes*	The property name that contains the lower range value with `number` or `date` values (*required when binding to objects).
`toField`	`string`	Yes*	The property name that contains the upper range value with `number` or `date` values (*required when binding to objects).
`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.

Change Theme

Theme

Loading ...

Range Area

Binding to Data

Support and Learning Resources

Additional Resources