Class ChartArea

Provides options to customize the chart area.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
ChartSubComponent
ChartArea
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class ChartArea : ChartSubComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Constructors

ChartArea()

Declaration
public ChartArea()

Properties

Background

Gets or sets the background of the chart area.

Declaration
[Parameter]
public string Background { get; set; }
Property Value
Type Description
string

A string representing the background color of the chart area. The default value is transparent.
Remarks

Accepts values in hex or rgba as valid CSS color string.

Examples
// This example demonstrates how to set the background to the chart:
<SfChart>
    <ChartArea Background="red" />
</SfChart>

BackgroundImage

Gets or sets the background image location or URL of the chart area.

Declaration
[Parameter]
public string BackgroundImage { get; set; }
Property Value
Type Description
string

A string representing the background image location or URL of the chart area. The default value is null.
Remarks

This property accepts a value as a URL link or location of an image. In this example, the image (wheat.png) is stored in the wwwroot folder and referenced using a relative path.

Examples
// This example demonstrates how to set the background image to the chart:
<SfChart>
    <ChartArea BackgroundImage="wheat.png" />
</SfChart>

Border

Gets or sets an instance of ChartAreaBorder which controls the customization of the chart area border color and width.

Declaration
[Parameter]
public ChartAreaBorder Border { get; set; }
Property Value
Type Description
ChartAreaBorder

An instance of ChartAreaBorder. The default value is a new instance of ChartAreaBorder.
Remarks

This property can be used to customize the color and width of the chart area border.

Examples
// This example demonstrates how to set the border for the chart area in the chart control:
<SfChart>
    <ChartArea>
        <ChartAreaBorder Width="2" Color="blue"></ChartAreaBorder>
    </ChartArea>
</SfChart>

Opacity

Gets or sets the opacity for the chart area background.

Declaration
[Parameter]
public double Opacity { get; set; }
Property Value
Type Description
double

A double value representing the opacity for the chart area background. The default value is 1.
Remarks

Accepts values in numerical form from 0 to 1.

Examples
// This example demonstrates how to set the background opacity for a chart area:
<SfChart>
    <ChartArea Background="red" Opacity="0.5" />
</SfChart>

Width

Gets or sets the width for the chart area.

Declaration
[Parameter]
public string Width { get; set; }
Property Value
Type Description
string

A string specifying the width for the chart area. The default value is null.
Remarks

Accepts values in percentage or in pixels.

Implements