New to Telerik UI for Blazor? Start a free 30-day trial

ChartChartArea

Class

Configures the visual appearance of the chart plotting area in TelerikChart. Use this component to customize the background color and transparency of the inner chart area where data series are rendered. This affects only the plotting region, not the entire chart container, allowing you to create visual contrast with data series, establish branding themes, or improve overall chart readability and aesthetics.

Definition

Namespace:Telerik.Blazor.Components

Assembly:Telerik.Blazor.dll

Syntax:

public class ChartChartArea : DataVizChildComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Inheritance: objectComponentBaseDataVizChildComponentChartChartArea

Implements: IComponentIDisposableIHandleAfterRenderIHandleEvent

Inherited Members DataVizChildComponent.Dispose()DataVizChildComponent.Dispose(bool)ComponentBase.OnInitializedAsync()ComponentBase.OnParametersSetAsync()ComponentBase.StateHasChanged()ComponentBase.ShouldRender()ComponentBase.OnAfterRenderAsync(bool)ComponentBase.InvokeAsync(Action)ComponentBase.InvokeAsync(Func<Task>)ComponentBase.DispatchExceptionAsync(Exception)ComponentBase.SetParametersAsync(ParameterView)...

Constructors

ChartChartArea()

public ChartChartArea()

Methods

BuildRenderTree(RenderTreeBuilder)

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters:__builderRenderTreeBuilder

Overrides: ComponentBase.BuildRenderTree(RenderTreeBuilder)

OnAfterRender(bool)

protected override void OnAfterRender(bool firstRender)

Parameters:firstRenderbool

Overrides: ComponentBase.OnAfterRender(bool)

OnInitialized()

protected override void OnInitialized()

Overrides: DataVizChildComponent.OnInitialized()

OnParametersSet()

protected override void OnParametersSet()

Overrides: ComponentBase.OnParametersSet()

Serialize()

Dictionary<string, object>

public Dictionary<string, object> Serialize()

Returns:

Dictionary<string, object>

Properties

Background

string

Sets the background color of the chart plotting area where data series are rendered. Accepts any valid CSS color including hex codes (#F8F9FA), RGB values (rgb(248,249,250)), named colors (whitesmoke), or HSL values. Use background colors to create visual contrast with data series, establish branding themes, or improve chart readability. This affects only the inner plotting area, not the entire chart container.

[Parameter]
public string Background { get; set; }

ChildContent

RenderFragment

[Parameter]
public RenderFragment ChildContent { get; set; }

Opacity

double?

Controls the transparency of the chart area background using values from 0.0 (completely transparent) to 1.0 (completely opaque, default). Lower opacity values (0.1-0.5) create subtle background effects that don't interfere with data visualization, while higher values (0.7-1.0) provide strong background presence. Useful for layered chart effects or subtle branding integration.

[Parameter]
public double? Opacity { get; set; }