Class ChartAxisLineStyle

Represents the style settings for the axis line in a chart, allowing customization of its color, width, and dash patterns.

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

Constructors

ChartAxisLineStyle()

Declaration
public ChartAxisLineStyle()

Properties

Color

Gets or sets the color of the axis line.

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

A string representing the color of the axis line. The default value is #b5b5b5.
Remarks

Use valid hex or rgba CSS color strings for the color value to ensure the correct presentation of the axis line in charts.

Examples
// The following code demonstrates setting a customize color for the axis line.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisLineStyle Width="3" Color="red" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisLineStyle Width="3" Color="red" />
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

DashArray

Gets or sets the dash array of the axis line.

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

A string representing the dash array of the axis line. The default value is an empty string.
Remarks

This property allows customization of the axis line's stroke pattern. Use a series of numbers to define the dash and gap lengths (e.g., "5,2,1" for a pattern of 5px dash, 2px gap, 1px dash).

Examples
// The following code demonstrates setting a customize color for the axis line.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisLineStyle Width="3" DashArray="5,1" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisLineStyle Width="3" DashArray="5,1" />
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

Width

Gets or sets the width of the axis line in pixels.

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

The double value representing the width of the axis line in pixels. The default value is 1.
Remarks

This property specifies the thickness of the axis line, allowing for visual emphasis as necessary.

Examples
// The following code demonstrates setting a customize width for the axis line.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisLineStyle Width="3" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisLineStyle Width="3" />
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

Implements