Class ChartAxis

Represents an axis within a chart, providing customization options for the axis's appearance and behavior.

Inheritance

System.Object

ChartSubComponent

ChartAxis

ChartPrimaryXAxis

ChartPrimaryYAxis

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartAxis : ChartSubComponent, ISubcomponentTracker, IChartElement

Constructors

ChartAxis()

Declaration

public ChartAxis()

Properties

Border

Gets or sets an instance of ChartAxisLabelBorder that specifies the border for the axis labels.

Declaration

public ChartAxisLabelBorder Border { get; set; }

Property Value

Type	Description
ChartAxisLabelBorder	An instance of ChartAxisLabelBorder.

Remarks

This property can be used to customize the border for axis labels.

Examples

// The following code demonstrates setting a customized style for the axis label.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisLabelBorder Color="blue" Width="2" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisLabelBorder Color="blue" Width="2" />
    </ChartPrimaryYAxis>
</SfChart>

Coefficient

Gets or sets the radius for polar and radar series charts.

Declaration

public double Coefficient { get; set; }

Property Value

Type	Description
System.Double	The double value represents the radius for polar and radar series charts. The default value is 100.

Remarks

Applicable only for Polar and Radar series type charts.

Examples

// The following code demonstrates how to set the radius for polar and radar series charts:
<SfChart>
    <ChartPrimaryXAxis Coefficient="60" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Polar" />
    </ChartSeriesCollection>
</SfChart>

ColumnIndex

Gets or sets the index of the column with which the axis is associated.

Declaration

public double ColumnIndex { get; set; }

Property Value

Type	Description
System.Double	The index of the column associated with the axis. The default value is 0.

Remarks

This property is applicable only when the chart area is divided into multiple plot areas using the ChartColumns. To bind a horizonatal axis to a specific column, set the axis’s ColumnIndex property to that column’s index.

Examples

// The following code demonstrates setting a divided chart area with multiple columns and binding a horizontal axis to a specific column:
<SfChart>
    <ChartColumns>
        <ChartColumn Width="50%" />
        <ChartColumn Width="50%" />
    </ChartColumns>
    <ChartAxes>
        <ChartAxis ColumnIndex="1" Name="XAxis" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" XAxisName="XAxis" />
    </ChartSeriesCollection>
</SfChart>

CrossesAt

Gets or sets the value (numeric, datetime, or logarithmic) at which the horizontal axis line intersects with the vertical axis or vice versa.

Declaration

public object CrossesAt { get; set; }

Property Value

Type	Description
System.Object	The value at which the horizontal axis line intersects with the vertical axis or vice versa. The default value is null.

Remarks

If the ValueType of the horizontal axis is ValueType.Category, the CrossesAt value for the vertical axis is accepted as a numeric value, which will be considered as the index of horizontal axis labels.

Examples

// This example demonstrates how to create a chart with a secondary Y-axis that crosses at zero:
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartAxes>
        <ChartAxis Minimum="-10" Maximum="10" Interval="1" OpposedPosition="true" RowIndex="1" Name="YAxis" CrossesAt="0" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
    </ChartSeriesCollection>
</SfChart>

CrossesInAxis

Gets or sets the name of the axis with which the axis line is to be crossed.

Declaration

public string CrossesInAxis { get; set; }

Property Value

Type	Description
System.String	The name of the axis with which the axis line is crossed.

Remarks

Applicable only when CrossesAt is provided with a value.

Examples

// This example demonstrates how to create a chart with a secondary Y-axis named "YAxis" that crosses the primary X-axis at zero:
<SfChart>
    <ChartAxes>
        <ChartAxis Minimum="-10" Maximum="10" Interval="1" OpposedPosition="true" RowIndex="1" Name="YAxis" CrossesAt="0" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
    </ChartSeriesCollection>
</SfChart>

CrosshairTooltip

Gets or sets an instance of ChartAxisCrosshairTooltip that controls the customization of the axis crosshair tooltip.

Declaration

public ChartAxisCrosshairTooltip CrosshairTooltip { get; set; }

Property Value

Type	Description
ChartAxisCrosshairTooltip	An instance of ChartAxisCrosshairTooltip.

Remarks

This property can be used to customize the fill and text style of the axis crosshair tooltip.

Examples

// This example demonstrates how to enable crosshair tooltip for the primary X-axis in a chart.
// The ChartCrosshairSettings component enables the crosshair globally,
// and ChartAxisCrosshairTooltip enables the tooltip specifically for the X-axis.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisCrosshairTooltip Enable="true" Fill="red" />
    </ChartPrimaryXAxis>
    <ChartCrosshairSettings Enable="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Description

Gets or sets the description about the axis and its elements for accessibility purposes.

Declaration

public string Description { get; set; }

Property Value

Type	Description
System.String	A string representing the description about the axis and its elements for accessibility. The default value is an empty string.

Remarks

Accepts the values in string.

Examples

// This example demonstrates how to set the description for the primary X-axis in a chart:
<SfChart>
    <ChartPrimaryXAxis Description="Primary X-Axis" />
    <ChartPrimaryYAxis Description="Primary Y-Axis" />
</SfChart>

DesiredIntervals

Gets or sets a value that indicates the approximate interval count for axis interval calculation.

Declaration

public double DesiredIntervals { get; set; }

Property Value

Type	Description
System.Double	The desired interval count for axis interval calculation. The default value is System.Double.NaN.

Remarks

Not applicable when ValueType of the axis is ValueType.Category.

Examples

// The following code demonstrates how to set the desired number of intervals on the X-axis:
<SfChart>
    <ChartPrimaryXAxis DesiredIntervals="1" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

EdgeLabelPlacement

Gets or sets the placement of labels at the edge of the axis.

Declaration

public EdgeLabelPlacement EdgeLabelPlacement { get; set; }

Property Value

Type	Description
EdgeLabelPlacement	One of the EdgeLabelPlacement enumerations that specify the edge label placement for the axis. The options include: None: No action will be performed, and the label will be rendered as it is. Hide: Hides the edge label if it exceeds the chart area. Shift: Shifts the edge labels within the chart area. The default mode is EdgeLabelPlacement.None.

Remarks

The longer text labels at the axis edges may only be partially visible in the chart. Utilize this property to place the edge labels efficiently for a better user experience.

Examples

// This example demonstrates how to hide edge labels on the primary axis in a chart:
<SfChart>
    <ChartPrimaryXAxis EdgeLabelPlacement="EdgeLabelPlacement.Hide" />
</SfChart>

EnableAutoIntervalOnZooming

Gets or sets a value indicating whether the axis interval should be calculated automatically with respect to the zoomed range.

Declaration

public bool EnableAutoIntervalOnZooming { get; set; }

Property Value

Type	Description
System.Boolean	true if automatic interval calculation is enabled during zooming; otherwise, false. The default value is true.

Remarks

This property affects axis intervals only when the chart is zoomed.

Examples

// This example demonstrates how to set the EnableAutoIntervalOnZooming for the axis:
<SfChart>
    <ChartPrimaryXAxis EnableAutoIntervalOnZooming="true/>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y"/>
    </ChartSeriesCollection>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

EnableScrollbarOnZooming

Gets or sets a value indicating whether the scrollbar for zooming is enabled.

Declaration

public bool EnableScrollbarOnZooming { get; set; }

Property Value

Type	Description
System.Boolean	true if the scrollbar for zooming is enabled; otherwise, false. The default value is true.

Remarks

If set to true, the axis will be rendered with a scrollbar when the chart is zoomed.

Examples

// This example demonstrates how to set the EnableScrollbarOnZooming for the axis:
<SfChart>
    <ChartPrimaryXAxis EnableScrollbarOnZooming="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y"/>
    </ChartSeriesCollection>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

EnableTrim

Gets or sets a value indicating whether axis labels should be trimmed when they exceed the MaximumLabelWidth.

Declaration

public bool EnableTrim { get; set; }

Property Value

Type	Description
System.Boolean	true if axis labels should be trimmed; otherwise, false. The default value is false.

Remarks

If set to true, axis labels which exceed the MaximumLabelWidth will be trimmed regardless of the LabelIntersectAction applied.

Examples

// This example demonstrates how to trim long labels on the axis and restrict them to a maximum width in a chart:
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" MaximumLabelWidth="20" EnableTrim="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Format

Gets or sets the DateTime format in which the labels of the elements such as axis label, data label, and tooltip in the chart component will be processed.

Declaration

public string Format { get; set; }

Property Value

Type	Description
System.String	A string representing the DateTime format for processing label values. The default value is an empty string.

Remarks

This property is applicable only for DateTime-based axis types.

Examples

// This example demonstrates how to set the format for the primary X-axis in a chart.
// The 'Format' property is set to "d MMM yyyy", which displays the date in a custom format,
// such as "1 Jan 2025". The ValueType is set to DateTimeCategory to properly handle the date data.
<SfChart>
    <ChartPrimaryXAxis Format="d MMM yyyy" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Interval

Gets or sets the interval for the axis.

Declaration

public double Interval { get; set; }

Property Value

Type	Description
System.Double	The numeric value representing the interval for the axis. The default value is System.Double.NaN.

Remarks

The interval can be customized using IntervalType for DateTime-based axis and LogBase for logarithmic-based axis. For example, if the interval is set to 2 and the IntervalType is set to Years, it considers 2 years to be the interval.

Examples

// This example demonstrates how to set a custom interval of 2 for the axis in a chart:
<SfChart>
    <ChartPrimaryXAxis Interval="2" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

IntervalType

Gets or sets the interval type for the DateTime-based axis.

Declaration

public IntervalType IntervalType { get; set; }

Property Value

Type

Description

IntervalType

One of the IntervalType enumerations that specifies the interval type for the DateTime-based axis. The options include: Auto: Defines the interval of the axis based on data. Years: Defines the interval of the axis in years. Months: Defines the interval of the axis in months. Days: Defines the interval of the axis in days. Hours: Defines the interval of the axis in hours. Minutes: Defines the interval of the axis in minutes. The default value is IntervalType.Auto.

Remarks

Choosing an appropriate interval type is essential for displaying DateTime data effectively. For instance, using a larger interval such as Years or Months may be more suitable for data spanning extended periods, while shorter intervals like Hours or Minutes are better suited for data requiring more detailed temporal granularity. Adjusting the interval type helps in achieving clarity and precision in your chart’s time representation.

Examples

// This example demonstrates how to configure the axis to display DateTime values and to show labels at monthly intervals in a Syncfusion Blazor chart:
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months" />
</SfChart>

IsIndexed

Gets or sets a value indicating whether the category axis should be rendered using the data source index values.

Declaration

public bool IsIndexed { get; set; }

Property Value

Type	Description
System.Boolean	true if the category axis should be rendered based on the data source index values; otherwise, false. The default value is false.

Remarks

If set to true, multiple series will be rendered based on their data source index values. Each series will be aligned based on the index of data points rather than matching the category names.

Examples

// This example demonstrates how to enable indexed category axis:
<SfChart>
    <ChartPrimaryXAxis IsIndexed="true" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports1" XName="X" YName="Y" />
        <ChartSeries DataSource="@WeatherReports2" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

IsInversed

Gets or sets a value indicating whether the axis should be rendered in an inversed manner.

Declaration

public bool IsInversed { get; set; }

Property Value

Type	Description
System.Boolean	true if the axis should be rendered in an inversed manner; otherwise, false. The default value is false.

Remarks

If set to true, the axis will be rendered with the greatest value on the axis moving closer to the origin, and vice versa.

Examples

// The following code demonstrates how to reverse the axis labels for both the x and y axes:
<SfChart>
    <ChartPrimaryXAxis IsInversed="true" />
    <ChartPrimaryYAxis IsInversed="true" />
</SfChart>

LabelFormat

Gets or sets a value that is used to format the numeric, logarithmic, and datetime labels to all globalize formats. Axis also supports custom label format using placeholders such as {value}K, where the value represents the axis label.

Declaration

public string LabelFormat { get; set; }

Property Value

Type	Description
System.String	A string representing the format for processing numeric, logarithmic, and datetime labels.

Remarks

The LabelFormat supports standard and custom formatting strings. For numeric values, formats like "C", "N", "P", etc., can be applied. For datetime values, formats like "d", "D", "t", etc., are supported. The property is not applicable to category axis labels.

Examples

// This example demonstrates how to apply a currency format to the axis labels:
<SfChart>
    <ChartPrimaryXAxis LabelFormat="c" />
</SfChart>

LabelIntersectAction

Gets or sets a value that specifies how to arrange axis labels intelligently when they intersect with each other.

Declaration

public LabelIntersectAction LabelIntersectAction { get; set; }

Property Value

Type

Description

LabelIntersectAction

One of the LabelIntersectAction enumerations that specifies the alignment of axis labels when they intersect. The options include: None: Show all labels, regardless of intersections. Hide: Hide labels that intersect with each other. Trim: Trim labels to fit within the available space when they intersect. Wrap: Wrap labels to multiple lines when they intersect. MultipleRows: Display labels in multiple rows when they intersect. Rotate45: Rotate labels by 45 degrees when they intersect. Rotate90: Rotate labels by 90 degrees when they intersect. The default LabelIntersectAction is LabelIntersectAction.Trim.

Remarks

Note: For the vertical axis, the Hide option is the only applicable choice.

Examples

// This example demonstrates how to apply a rotate 45 degrees to the axis labels:
<SfChart>
    <ChartPrimaryXAxis LabelIntersectAction="LabelIntersectAction.Rotate45" />
</SfChart>

LabelPadding

Gets or sets the padding for axis labels from the axis line in pixels.

Declaration

public double LabelPadding { get; set; }

Property Value

Type	Description
System.Double	The numeric value representing the label padding from the axis line in pixels. The default value is 5.

Remarks

Increasing the padding can prevent labels from overlapping with the axis line, ensuring clear visibility. Conversely, reducing the padding can create a more compact layout, useful for fitting charts into limited spaces. It is important to consider the overall design and label size when setting this value to maintain a clean and readable chart display.

Examples

// This example demonstrates how to add padding to the axis labels in the X axis.
// LabelPadding property is used to move the labels away from the axis line.
<SfChart>
    <ChartPrimaryXAxis LabelPadding="20"></ChartPrimaryXAxis>
</SfChart>

LabelPlacement

Gets or sets a value that specifies the placement of axis labels with respect to the axis tick lines.

Declaration

public LabelPlacement LabelPlacement { get; set; }

Property Value

Type	Description
LabelPlacement	One of the LabelPlacement enumerations that specifies the placement for the axis labels. The options include: BetweenTicks: Renders the label between the ticks. OnTicks: Renders the label on the ticks. The default value is LabelPlacement.BetweenTicks.

Remarks

The placement of axis labels can have a significant impact on the readability and accuracy of the chart. When labels are placed BetweenTicks, they are centered between tick marks, often used to represent categories or ranges accurately. Alternatively, when labels are placed OnTicks, they align directly with the tick marks, which can be beneficial for pinpointing specific values or time points. Choosing the appropriate label placement contributes to better data comprehension and presentation.

Examples

// This example demonstrates how to position the axis labels on the tick:
<SfChart>
    <ChartPrimaryXAxis LabelPlacement="LabelPlacement.OnTicks" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

LabelPosition

Gets or sets the position of axis labels relative to the axis line.

Declaration

public AxisPosition LabelPosition { get; set; }

Property Value

Type	Description
AxisPosition	One of the AxisPosition enumerations that specifies the position of labels relative to the axis line. The options include: Inside: Renders the labels inside the axis line. Outside: Renders the labels outside the axis line. The default value is AxisPosition.Outside.

Remarks

Placing labels inside the axis line (Inside) might be beneficial when you have limited space or when you want a minimal chart appearance. Conversely, placing labels outside the axis line (Outside) can enhance visibility and separation from the chart area, particularly in situations where overlapping with data points or elements might occur. It is important to consider the overall chart layout and data presentation needs when setting this property.

Examples

// This example demonstrates how to position the axis labels inside the chart area.
<SfChart>
    <ChartPrimaryXAxis LabelPosition="AxisPosition.Inside" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

LabelRotation

Gets or sets the angle at which the axis labels are rotated.

Declaration

public double LabelRotation { get; set; }

Property Value

Type	Description
System.Double	A double value representing the rotation angle of the axis labels. The default value is 0.

Remarks

This property specifies the rotation angle applied to axis labels, which can enhance their orientation and improve readability. It accepts numerical values ranging from 0 to 360 degrees. Negative values indicate angles that are calculated in a opposite direction, starting from 360 degrees. Setting this property allows for customizing how the labels are presented along the axis, accommodating various layout needs.

Examples

// This example demonstrates how to rotate the axis labels on the axis.
<SfChart>
    <ChartPrimaryXAxis LabelRotation="45" />
</SfChart>

LabelStyle

Gets or sets an instance of ChartAxisLabelStyle that specifies the text style of axis labels.

Declaration

public ChartAxisLabelStyle LabelStyle { get; set; }

Property Value

Type	Description
ChartAxisLabelStyle	An instance of ChartAxisLabelStyle.

Remarks

This property can be used to customize the color and font properties such as size, font-family, font-weight and font-style of axis labels.

Examples

// This example demonstrates how to customize the axis label style for the primary X-axis.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisLabelStyle 
            Color="blue" 
            FontFamily="italic" 
            FontWeight="400" 
            FontStyle="Normal" 
            Size="12px" />
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

LabelTemplate

Gets or sets the template used to render axis labels of the SfChart.

Declaration

public RenderFragment<ChartAxisLabelInfo> LabelTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<ChartAxisLabelInfo>	A Microsoft.AspNetCore.Components.RenderFragment<> representing the custom template for axis labels.

Remarks

This property allows for the display of customized labels, images, or other UI elements in the axis labels.

Examples

 

<SfChart> 
    <ChartPrimaryXAxis> 
        <LabelTemplate> 
            @{ 
                var data = context as ChartAxisLabelInfo; 
            } 
            <div>@data.Text</div> 
        </LabelTemplate> 
    </ChartPrimaryXAxis> 
</SfChart> 

LineStyle

Gets or sets an instance of ChartAxisLineStyle that controls the customization of axis line.

Declaration

public ChartAxisLineStyle LineStyle { get; set; }

Property Value

Type	Description
ChartAxisLineStyle	An instance of ChartAxisLineStyle.

Remarks

This property can be used to customize the color, width, and dash array of the axis line.

Examples

// This example demonstrates how to customize the axis line style for the primary axis in a chart.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisLineStyle 
            Width="2" 
            Color="red" 
            DashArray="5,1" />
    </ChartPrimaryXAxis>
</SfChart>

LogBase

Gets or sets the base value for the logarithmic axis.

Declaration

public double LogBase { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the base value for the logarithmic axis. The default value is 10.

Remarks

This property is applicable only when the ValueType of the axis is set to Logarithmic. For example, if the logarithmic base is 10 and the Interval is 2, the axis labels will be placed at intervals of 10^2. Adjusting this value is crucial for ensuring appropriate scale representation in logarithmic value type axis.

Examples

// This example demonstrates how to configure a logarithmic axis for the primary axis in a chart.
// The axis uses a logarithmic scale with a base of 20 to display data spanning multiple magnitudes.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" LogBase="20" />
</SfChart>

MajorGridLines

Gets or sets an instance of ChartAxisMajorGridLines that controls the customization of major grid lines.

Declaration

public ChartAxisMajorGridLines MajorGridLines { get; set; }

Property Value

Type	Description
ChartAxisMajorGridLines	An instance of ChartAxisMajorGridLines.

Remarks

This property can be used to customize the color, width, and dash array of the major grid lines.

Examples

// The following code demonstrates setting a customize for the axis major gridlines.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisMajorGridLines DashArray="5,1" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisMajorGridLines DashArray="5,1" />
    </ChartPrimaryYAxis>
</SfChart>

MajorTickLines

Gets or sets an instance of ChartAxisMajorTickLines that controls the customization of major tick lines.

Declaration

public ChartAxisMajorTickLines MajorTickLines { get; set; }

Property Value

Type	Description
ChartAxisMajorTickLines	An instance of ChartAxisMajorTickLines.

Remarks

This property can be used to customize the color, width, and height of the major tick lines.

Examples

// The following code demonstrates setting a customized for the axis major tick lines.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisMajorTickLines Color="red" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisMajorTickLines Color="blue" />
    </ChartPrimaryYAxis>
</SfChart>

Maximum

Gets or sets the maximum range of an axis.

Declaration

public object Maximum { get; set; }

Property Value

Type	Description
System.Object	The value representing the maximum range of an axis. The default value is derived from the values of corresponding data source points.

Remarks

This property specifies the maximum range for the axis. It determines the upper limit of the visible range on the axis.

Examples

// This example demonstrates how to set a maximum value for the axis in chart:
<SfChart>
    <ChartPrimaryXAxis Maximum="20" />
</SfChart>

MaximumLabels

Gets or sets the maximum number of labels per 100 pixels relative to the axis length.

Declaration

public double MaximumLabels { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the maximum label count. The default value is 3.

Remarks

Adjusting this value can help optimize the readability and clutter of axis labels.

Examples

// This example demonstrates how to apply a maximum label count to the primary axis in a chart.
<SfChart>
    <ChartPrimaryXAxis MaximumLabels="5" />
</SfChart>

MaximumLabelWidth

Gets or sets the maximum width for an axis label.

Declaration

public double MaximumLabelWidth { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the maximum allowable width for an axis label, measured in pixels. The default value is 34.

Remarks

When EnableTrim is set to true, axis labels that exceed the specified MaximumLabelWidth will be trimmed to fit within this limit.

Examples

// This example demonstrates how to trim long labels on the axis and restrict them to a maximum width in a chart.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" MaximumLabelWidth="20" EnableTrim="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Minimum

Gets or sets the minimum range of an axis.

Declaration

public object Minimum { get; set; }

Property Value

Type	Description
System.Object	The value representing the minimum range of an axis. The default value is derived from the values of corresponding data source points.

Remarks

This property specifies the minimum range for the axis. It determines the lower limit of the visible range on the axis.

Examples

// This example demonstrates how to set a custom minimum value for the axis in a Syncfusion Blazor chart:
<SfChart>
    <ChartPrimaryXAxis Minimum="-10" />
</SfChart>

MinorGridLines

Gets or sets an instance of ChartAxisMinorGridLines that controls the customization of minor grid lines.

Declaration

public ChartAxisMinorGridLines MinorGridLines { get; set; }

Property Value

Type	Description
ChartAxisMinorGridLines	An instance of ChartAxisMinorGridLines.

Remarks

This property can be used to customize the color, width, and dash array of the minor grid lines.
Note: Minor grid lines will be rendered only when MinorTicksPerInterval is provided with a value greater than zero.

Examples

// The following code demonstrates setting a customized style for the axis minor grid lines.
<SfChart>
    <ChartPrimaryXAxis MinorTicksPerInterval="1">
        <ChartAxisMinorGridLines Color="red" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis MinorTicksPerInterval="1">
        <ChartAxisMinorGridLines Color="blue" />
    </ChartPrimaryYAxis>
</SfChart>

MinorTickLines

Gets or sets an instance of ChartAxisMinorTickLines that controls the customization of minor tick lines.

Declaration

public ChartAxisMinorTickLines MinorTickLines { get; set; }

Property Value

Type	Description
ChartAxisMinorTickLines	An instance of ChartAxisMinorTickLines.

Remarks

This property can be used to customize the color, width, and dash array of the minor tick lines.
Note: Minor tick lines will be rendered only when MinorTicksPerInterval is provided with a value greater than zero.

Examples

// The following code demonstrates setting a custom style for the axis minor tick lines.
<SfChart>
    <ChartPrimaryXAxis MinorTicksPerInterval="1">
        <ChartAxisMinorTickLines Color="red" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis MinorTicksPerInterval="1">
        <ChartAxisMinorTickLines Color="blue" />
    </ChartPrimaryYAxis>
</SfChart>

MinorTicksPerInterval

Gets or sets the number of minor ticks to render per interval.

Declaration

public double MinorTicksPerInterval { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the number of minor ticks per interval.

Remarks

Note: Minor grid lines and minor tick lines are rendered only when this property is set to a value greater than zero.

Examples

// The following code demonstrates setting a custom style for the axis minor tick lines and grid line.
<SfChart>
    <ChartPrimaryXAxis MinorTicksPerInterval="1" />
    <ChartPrimaryYAxis MinorTicksPerInterval="1" />
</SfChart>

MultiLevelLabels

Gets or sets a collection of ChartMultiLevelLabel representing the multilevel labels for the axis.

Declaration

public List<ChartMultiLevelLabel> MultiLevelLabels { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<ChartMultiLevelLabel>	A list of ChartMultiLevelLabel.

Remarks

This property allows adding any number of layers of labels to the axis.

Examples

// This example demonstrates how to use multi-level labels in the primary X-axis of a chart.
// Multi-level labels allow grouping of axis labels into hierarchical levels for better readability.
// Two categories are created for "Half yearly 1" and "Half yearly 2" with a maximum text width of 50.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartCategories>
                    <ChartCategory Start="10" End="40" Text="Half yearly 1" MaximumTextWidth=50 />
                    <ChartCategory Start="40" End="70" Text="Half yearly 2" MaximumTextWidth=50 />
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Name

Gets or sets the unique identifier name of an axis.

Declaration

public string Name { get; set; }

Property Value

Type	Description
System.String	A string representing the unique identifier name of the axis. The default value is an empty string.

Remarks

To associate an axis with the series, set this name to the xAxisName/yAxisName properties of the series.

Examples

// This example demonstrates how to set the name of the axis:
<SfChart>
    <ChartAxes>
        <ChartAxis OpposedPosition="true" RowIndex="1" Name="YAxis" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y"/>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
    </ChartSeriesCollection>
</SfChart>

OpposedPosition

Gets or sets a value indicating whether to place an axis in the opposite position of its original position.

Declaration

public bool OpposedPosition { get; set; }

Property Value

Type	Description
System.Boolean	true if the axis should render at the opposite position; otherwise, false. The default value is false.

Remarks

For a horizontal axis, setting OpposedPosition to true will position the axis at the top of the chart. For a vertical axis, setting OpposedPosition to true will position the axis at the right side of the chart.

Examples

// The following code demonstrates how to oppose-position the axis labels for both the x and y axes:
<SfChart>
    <ChartPrimaryXAxis OpposedPosition="true" />
    <ChartPrimaryYAxis OpposedPosition="true" />
</SfChart>

PlaceNextToAxisLine

Gets or sets a value indicating whether axis elements, such as axis labels and axis titles, should be placed next to the axis line when an axis crossing occurs.

Declaration

public bool PlaceNextToAxisLine { get; set; }

Property Value

Type	Description
System.Boolean	true if axis elements should be placed next to the axis line; otherwise, false. The default value is true.

Remarks

This property applies only when an axis crossing occurs.

Examples

// This example demonstrates how to create a chart with a secondary Y-axis that crosses at zero and is placed next to the axis line.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartAxes>
        <ChartAxis Minimum="-10" Maximum="10" Interval="1" OpposedPosition="true" RowIndex="1" Name="YAxis" CrossesAt="0" PlaceNextToAxisLine="true" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
    </ChartSeriesCollection>
</SfChart>

PlotOffset

Gets or sets the padding for the plot area in pixels.

Declaration

public double PlotOffset { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the padding for the plot area.

Remarks

This property specifies the top and bottom padding of the plot area for the vertical axis, and the left and right padding for the horizontal axis. Adjusting the PlotOffset property allows for customization of the spacing around the plot area.

Examples

// This example demonstrates how to apply plot offset to both the primary X and Y axes.
// PlotOffset creates spacing between the axis line and the plot area to enhance readability.
<SfChart>
    <ChartPrimaryXAxis PlotOffset="20" />
    <ChartPrimaryYAxis PlotOffset="20" />
</SfChart>

PlotOffsetBottom

Gets or sets the bottom padding for the plot area in pixels.

Declaration

public double PlotOffsetBottom { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the bottom padding for the plot area. The default value is System.Double.NaN.

Remarks

This property is applicable only for the vertical axis.

Examples

// This example demonstrates how to apply bottom plot offset for both primary X and Y axes.
// PlotOffsetBottom adds extra padding below the axis to improve spacing or visual alignment.
<SfChart>
    <ChartPrimaryXAxis PlotOffsetBottom="20" />
    <ChartPrimaryYAxis PlotOffsetBottom="20" />
</SfChart>

PlotOffsetLeft

Gets or sets the left padding for the plot area in pixels.

Declaration

public double PlotOffsetLeft { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the left padding for the plot area. The default value is System.Double.NaN.

Remarks

This property is applicable only for the horizontal axis.

Examples

// This example demonstrates how to apply left plot offset for both primary X and Y axes.
// PlotOffsetLeft adds spacing on the left side of the axis area to control layout and visual alignment.
<SfChart>
    <ChartPrimaryXAxis PlotOffsetLeft="20" />
    <ChartPrimaryYAxis PlotOffsetLeft="20" />
</SfChart>

PlotOffsetRight

Gets or sets the right padding for the plot area in pixels.

Declaration

public double PlotOffsetRight { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the right padding for the plot area. The default value is System.Double.NaN.

Remarks

This property is applicable only for the horizontal axis.

Examples

// This example demonstrates how to apply right plot offset for both primary X and Y axes.
// PlotOffsetLeft adds spacing on the right side of the axis area to control layout and visual alignment.
<SfChart>
    <ChartPrimaryXAxis PlotOffsetRight="20" />
    <ChartPrimaryYAxis PlotOffsetRight="20" />
</SfChart>

PlotOffsetTop

Gets or sets the top padding for the plot area in pixels.

Declaration

public double PlotOffsetTop { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the top padding for the plot area. The default value is System.Double.NaN.

Remarks

This property is applicable only for the vertical axis.

Examples

// This example demonstrates how to apply top plot offset for both primary X and Y axes.
// PlotOffsetLeft adds spacing on the top side of the axis area to control layout and visual alignment.
<SfChart>
    <ChartPrimaryXAxis PlotOffsetTop="20" />
    <ChartPrimaryYAxis PlotOffsetTop="20" />
</SfChart>

RangePadding

Gets or sets a value that specifies the padding for the axis range in terms of interval.

Declaration

public ChartRangePadding RangePadding { get; set; }

Property Value

Type

Description

ChartRangePadding

One of the ChartRangePadding enumerations that specifies the range padding of the axis. The options include: None: Padding cannot be applied to the axis. Normal: Padding is applied to the axis based on the range calculation. Additional: Interval of the axis is added as padding to the minimum and maximum values of the range. Round: Axis range is rounded to the nearest possible value divisible by the interval. The default value is ChartRangePadding.Auto.

Remarks

This setting ensures clarity and better axis range handling by allowing extra space or precise boundary control as necessary.

Examples

// This example demonstrates how to set the range padding of the primary Y-axis to None.
// Setting RangePadding to 'None' disables the automatic padding, allowing the axis range
// to match the actual minimum and maximum of the data values.
<SfChart>
    <ChartPrimaryYAxis RangePadding="ChartRangePadding.None" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

RowIndex

Gets or sets a value that specifies the index of the row with which the axis is associated.

Declaration

public double RowIndex { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the index of the row associated with the axis. The default value is 0.

Remarks

This property is applicable only when the chart area is divided into multiple plot areas using Rows. To bind a vertical axis to a specific row, set the axis’s RowIndex property to that row’s index.

Examples

// The following code demonstrates setting a custom row in a chart.
<SfChart>
    <ChartRows>
        <ChartRow Height="50%" />
        <ChartRow Height="50%" />
    </ChartRows>
    <ChartAxes>
        <ChartAxis RowIndex="1" Name="YAxis" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
    </ChartSeriesCollection>
</SfChart>

ScrollbarSettings

Gets or sets an instance of ChartAxisScrollbarSettings that controls the customization of the axis scrollbar.

Declaration

public ChartAxisScrollbarSettings ScrollbarSettings { get; set; }

Property Value

Type	Description
ChartAxisScrollbarSettings	An instance of ChartAxisScrollbarSettings.

Remarks

This property can be used to customize the visibility, pointslength and range for the axis scrollbar.

Examples

// This example demonstrates how to set the range for the scrollbar on the primary X-axis of a chart.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartAxisScrollbarSettings Enable="true" PointsLength="30" />
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@dataSource" XName="x" YName="y" />
    </ChartSeriesCollection>
</SfChart>

Span

Specifies the number of columns or rows an axis must span horizontally or vertically.

Declaration

public int Span { get; set; }

Property Value

Type	Description
System.Int32	An integer representing the number of columns or rows the axis spans. The default value is 1.

Remarks

This property is applicable only when the chart area is divided into multiple panes using “Rows” or “Columns”.

Examples

// This example demonstrates how to set the span for the primary y-axis in a chart.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartPrimaryYAxis Span="2" Minimum="0" Maximum="90" Interval="20" />
    <ChartRows>
        <ChartRow Height="50%" />
        <ChartRow Height="50%" />
    </ChartRows>
    <ChartAxes>
        <ChartAxis Minimum="24" Maximum="36" Interval="2" OpposedPosition="true" RowIndex="1" Name="YAxis" LabelFormat="{value}°C" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
    </ChartSeriesCollection>
</SfChart>

StartAngle

Gets or sets the start angle for the series.

Declaration

public double StartAngle { get; set; }

Property Value

Type	Description
System.Double	The numeric value representing the start angle for the series.

Remarks

This property is applicable only for customizing series in Polar and Radar series type charts.

Examples

// This example demonstrates how to set a custom start angle for the primary X-axis in a polar chart.
// The 'StartAngle' is set to 270 degrees, which rotates the chart so the first point starts at the bottom.
<SfChart>
    <ChartPrimaryXAxis StartAngle="270" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@SalesReports" XName="X" YName="Y"
                     Type="ChartSeriesType.Polar" DrawType="ChartDrawType.Line" />
    </ChartSeriesCollection>
</SfChart>

StartFromZero

Gets or sets a value indicating whether the numeric axis should start from zero.

Declaration

public bool StartFromZero { get; set; }

Property Value

Type	Description
System.Boolean	true if the numeric axis starts from zero; otherwise, false. The default value is true.

Remarks

This property is only applicable for numeric axes.

Examples

// This example demonstrates how to disable the 'StartFromZero' property for the primary X-axis.
// When 'StartFromZero' is set to 'false', the axis will not automatically start from zero.
<SfChart>
    <ChartPrimaryXAxis StartFromZero="false"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

StripLines

Gets or sets a collection of strip lines for the axis.

Declaration

public List<ChartStripline> StripLines { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<ChartStripline>	A list containing instances of ChartStripline representing the strip lines for the axis.

Remarks

This property allows the addition of strip lines to the axis. The strip lines in the list will be rendered on the respective axis.

Examples

// This example demonstrates how to use strip lines in a chart.
// Strip lines are used to highlight specific ranges in the chart axis.
// In this example, red and blue strip lines are added on the Y-axis.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red" />
            <ChartStripline Start="32" End="35" Color="blue" />
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

TabIndex

Gets or sets the tabindex value for the axis for accessibility purposes.

Declaration

public double TabIndex { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the tabindex for the axis. The default value is 2.

Remarks

The property allows users to include the axis in the natural tab order of the page or modify its order in the sequence.

Examples

// This example demonstrates how to set the TabIndex for the primary X-axis.
// The TabIndex property determines the tab order of the chart elements for keyboard navigation.
<SfChart>
    <ChartPrimaryXAxis TabIndex="1"></ChartPrimaryXAxis>
</SfChart>

TickPosition

Gets or sets the placement of ticks on the axis line.

Declaration

public AxisPosition TickPosition { get; set; }

Property Value

Type	Description
AxisPosition	One of the AxisPosition enumeration that specifies the placement of ticks with respect to the axis line. Options include: Inside: Renders the ticks inside the axis line. Outside: Renders the ticks outside the axis line. The default mode is AxisPosition.Outside.

Remarks

Adjusting the placement of ticks can have an impact on the readability and aesthetics of the chart. Placing ticks inside the axis line (Inside) may result in a cleaner look when space is constrained. In contrast, placing ticks outside (Outside) can improve clarity and separation from the chart content, especially if data points are dense or close to the axis.

Examples

// This example demonstrates how to position the tick lines inside the chart area
// for both the primary X-axis and Y-axis using the TickPosition property.
<SfChart>
    <ChartPrimaryXAxis TickPosition="AxisPosition.Inside"></ChartPrimaryXAxis>
    <ChartPrimaryYAxis TickPosition="AxisPosition.Inside"></ChartPrimaryYAxis>
</SfChart>

Title

Gets or sets the title of an axis.

Declaration

public string Title { get; set; }

Property Value

Type	Description
System.String	A string representing the title of the axis. The default value is an empty string.

Remarks

The axis title provides a quick information to the user about the data plotted in the axis.

Examples

// The following code demonstrates how to set the title to the axis labels for both the x and y axes:
<SfChart>
    <ChartPrimaryXAxis Title="XAxis" />
    <ChartPrimaryYAxis Title="YAxis" />
</SfChart>

TitleStyle

Gets or sets an instance of ChartAxisTitleStyle that specifies the style of the axis title.

Declaration

public ChartAxisTitleStyle TitleStyle { get; set; }

Property Value

Type	Description
ChartAxisTitleStyle	An instance of ChartAxisTitleStyle.

Remarks

This property allows customization of the visual style, including color and font properties enhancing the visual appeal of the axis title.

Examples

// The following code demonstrates setting a customized style for the axis title.
<SfChart>
    <ChartPrimaryXAxis Title="XAxis">
        <ChartAxisTitleStyle Size="15px" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis Title="YAxis">
        <ChartAxisTitleStyle Size="15px" />
    </ChartPrimaryYAxis>
</SfChart>

ValueType

Gets or sets the type of data the axis is handling.

Declaration

public ValueType ValueType { get; set; }

Property Value

Type	Description
ValueType	One of the ValueType enumerations that specifies the value type of the axis. Options include: Double: Renders a numeric axis. DateTime: Renders a date time axis. Category: Renders a category axis. Logarithmic: Renders a logarithmic axis. DateTimeCategory : Renders a date time category axis. The default value is ValueType.Double.

Remarks

This property determines the type of data the axis is handling, and it affects the way axis values are interpreted and displayed on the chart.
It is essential to set this property correctly based on the nature of the data being plotted.

Examples

// The following code demonstrates how to set the value type to the axis:
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold"/>
    </ChartSeriesCollection>
</SfChart>
@code{
    public class ChartData
    {
        public string Country { get; set;}
        public double Gold {get; set;}
    }
    public List<ChartData> MedalDetails = new List<ChartData>
    {
        new ChartData{ Country = "USA", Gold = 50 },
        new ChartData{ Country = "China", Gold = 40 },
        new ChartData{ Country = "Japan", Gold = 70 }
    };
}

Visible

Gets or sets a value indicating whether the axis elements such as axis labels, tick lines, grid lines, and axis title should be visible.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	true if the axis and its associated elements are visible; otherwise, false. The default value is true.

Remarks

Set this property to control the visibility of various axis elements. When set to false, the axis and its associated elements will not be rendered on the chart.

Examples

// The following code demonstrates how to set the visibility of the axis:
<SfChart>
    <ChartPrimaryXAxis Visible="true" />
    <ChartPrimaryYAxis Visible="false" />
</SfChart>

ZoomFactor

Gets or sets the scaling factor for the axis during zoom operations.

Declaration

public double ZoomFactor { get; set; }

Property Value

Type	Description
System.Double	The scaling factor for the axis, which ranges from 0 to 1. The default value is 1.

Remarks

When ZoomFactor is set to 0.5, the chart is scaled by 200% along this axis.

Examples

// This example demonstrates how to set the ZoomFactor of the axis to zoom into the chart:
<SfChart>
    <ChartPrimaryXAxis ZoomFactor="0.5" />
</SfChart>

ZoomPosition

Gets or sets the position of the zoomed axis during zoom operations.

Declaration

public double ZoomPosition { get; set; }

Property Value

Type	Description
System.Double	The position of the zoomed axis, which ranges from 0 to 1.

Remarks

The ZoomPosition property determines the relative position of the zoomed axis during zoom operations. A value of 0 represents the start of the axis, and a value of 1 represents the end of the axis. This property is used in conjunction with the ZoomFactor property to control the zoom behavior along the axis.

Examples

// This example demonstrates how to configure the ZoomFactor and ZoomPosition for the X-axis:
<SfChart>
    <ChartPrimaryXAxis ZoomFactor="0.5" ZoomPosition="0.6" />
</SfChart>