New to Kendo UI for Angular? Start a free 30-day trial
Plot Area
The Chart plot area is a container for the data that is enclosed between the axes.
The plot area configuration does not apply to donut, pie, pyramid, and funnel chart types as these charts do not use traditional axes. For these chart types, configure styling through series-level options (padding, spacing, margins), chart area properties (background, border), or individual segment styling.
To customize the plot area, use the kendo-chart-plot-area configuration component.
html
<kendo-chart>
<kendo-chart-plot-area background="lightblue" [margin]="{ top: 10, left: 10, right: 10, bottom: 10 }">
</kendo-chart-plot-area>
</kendo-chart>Configuration Options
The plot area supports several configuration options to customize its appearance:
- Background color and opacity—Set solid colors or transparent backgrounds.
- Border styling—Configure border width, color, and dash type.
- Margins and padding—Control spacing around the plot area.
The following example demonstrates the plot area properties and styling options.
Change Theme
Theme
Loading ...
Support and Learning Resources
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Chart
- Axes
- Chart Area
- Crosshairs
- Error Bars
- Labels
- Legend
- Notes
- Panes
- Plot Bands
- Selection
- Series
- Title
- Tooltips
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base