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

Range Area Charts

Updated on Jan 20, 2026

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.

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

The Range Area chart supports vertical orientation through the verticalRangeArea series 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.

Change Theme

Theme

Loading ...

Customizing the Appearance

You can customize the visual appearance of the Range Area chart through several styling properties:

color—Specifies the fill color of the range area.
opacity—Controls the transparency of the area fill (0 to 1).
line—Configures the line properties, including width and style through the SeriesLine configuration.
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.

Change Theme

Theme

Loading ...

Range Area Charts

Binding to Data

Vertical Range Area Chart

Customizing the Appearance

Support and Learning Resources

Additional Resources