Class ChartDefaultBorder

Provides options for customizing the color and width of the border.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
ChartSubComponent
ChartDefaultBorder
ChartAreaBorder
ChartBorder
ChartCrosshairLine
ChartDataLabelBorder
ChartEmptyPointBorder
ChartLastDataLabelBorder
ChartLegendBorder
ChartMarkerBorder
ChartStackLabelBorder
ChartStriplineBorder
ChartTooltipBorder
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class ChartDefaultBorder : ChartSubComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Constructors

ChartDefaultBorder()

Declaration
public ChartDefaultBorder()

Properties

Color

Gets or sets the color of the border, accepting values in hexadecimal or RGBA formats as valid CSS color strings.

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

A string that specifies the color of the chart border. The value must be a valid CSS color string, formatted as either a hexadecimal or RGBA value.
Remarks

Changing this property will update the visual boundary of the chart's border to match the specified color, enhancing the stylistic appearance or aligning with specific design standards.

Examples
// This example demonstrates how to set all the borders used in the chart control.
<SfChart>
    <ChartBorder Color="blue" Width="1"></ChartBorder>
    <ChartArea>
        <ChartAreaBorder Width="2" Color="green"></ChartAreaBorder>
    </ChartArea>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineBorder Color="#4b107e" Width="2"></ChartStriplineBorder>
            </ChartStripline>
            <ChartStripline Start="32" End="35" Color="blue">
                <ChartStriplineBorder Color="#d41986" Width="2"></ChartStriplineBorder>
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true">
        <ChartCrosshairLine Width="2" Color="green"></ChartCrosshairLine>
    </ChartCrosshairSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            <ChartEmptyPointSettings Mode="EmptyPointMode.Average">
                <ChartEmptyPointBorder Width="1" Color="brown"></ChartEmptyPointBorder>
            </ChartEmptyPointSettings>
            <ChartSeriesBorder Width="1" Color="black"></ChartSeriesBorder>
            <ChartMarker Visible="true">
                <ChartMarkerBorder Width="2" Color="red"></ChartMarkerBorder>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelBorder Width="2" Color="red"></ChartDataLabelBorder>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true">
        <ChartLegendBorder Color="red" Width="2" />
     </ChartLegendSettings>
</SfChart>

Width

Gets or sets the width of the border in pixels.

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

A double specifying the border's width. The default value is 1, representing 1 pixel.
Remarks

Adjust this property to increase or decrease the thickness of the chart border, which can help draw focus or emphasize the chart's outline.

Examples
// This example demonstrates how to set all the borders used in the chart control.
<SfChart>
    <ChartBorder Color="blue" Width="1"></ChartBorder>
    <ChartArea>
        <ChartAreaBorder Width="2" Color="green"></ChartAreaBorder>
    </ChartArea>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineBorder Color="#4b107e" Width="2"></ChartStriplineBorder>
            </ChartStripline>
            <ChartStripline Start="32" End="35" Color="blue">
                <ChartStriplineBorder Color="#d41986" Width="2"></ChartStriplineBorder>
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true">
        <ChartCrosshairLine Width="2" Color="green"></ChartCrosshairLine>
    </ChartCrosshairSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            <ChartEmptyPointSettings Mode="EmptyPointMode.Average">
                <ChartEmptyPointBorder Width="1" Color="brown"></ChartEmptyPointBorder>
            </ChartEmptyPointSettings>
            <ChartSeriesBorder Width="1" Color="black"></ChartSeriesBorder>
            <ChartMarker Visible="true">
                <ChartMarkerBorder Width="2" Color="red"></ChartMarkerBorder>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelBorder Width="2" Color="red"></ChartDataLabelBorder>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true">
        <ChartLegendBorder Color="red" Width="2" />
     </ChartLegendSettings>
</SfChart>

Implements