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

ChartAreaComponent

Updated on Oct 30, 2025

Represents the Kendo UI for Angular Chart Area configuration. Represents the entire visible area of the Chart (see example).

html

<kendo-chart>
 <kendo-chart-area background="#f0f0f0" [border]="{ color: '#ccc', width: 1 }">
 </kendo-chart-area>
</kendo-chart>

Selector

kendo-chart-area

Name	Type	Default	Description
background	`string`	`'white'`	Specifies the background color of the Chart area. Accepts a valid CSS color string, including hex and rgb.
border	`Border`		Specifies the border configuration of the Chart area.
height	`number`	`400`	Specifies the height of the Chart area.
margin	`number \| Margin`	`5`	Specifies the margin of the Chart area. A numeric value sets all margins.
opacity	`number`	`1`	Specifies the background opacity of the Chart area. By default, the background is opaque.
width	`number`	`600`	Specifies the width of the Chart area.

Updates the component fields with the specified values and refreshes the Chart.

Use this method when the configuration values cannot be set through the template.

item.notifyChanges({ visible: true });

Parameters
changes	`any`	An object containing the updated input fields.