Class ChartAxis

The ChartAxis is the base class for all types of axes.

Inheritance

System.Object

ChartAxis

CategoryAxis

RangeAxisBase

Namespace: Syncfusion.Maui.Charts

Assembly: Syncfusion.Maui.Charts.dll

Syntax

public abstract class ChartAxis : Element, IThemeElement

Remarks

The ChartAxis is used to locate a data point inside the chart area. Charts typically have two axes that are used to measure and categorize data.

The Vertical(Y) axis always uses numerical scale.

The Horizontal(X) axis supports the Category, Numeric and Date-time.

Constructors

ChartAxis()

Initializes a new instance of the ChartAxis class.

Declaration

public ChartAxis()

Fields

AutoScrollingDeltaProperty

Identifies the AutoScrollingDelta bindable property.

Declaration

public static readonly BindableProperty AutoScrollingDeltaProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

AutoScrollingModeProperty

Identifies the AutoScrollingMode bindable property.

Declaration

public static readonly BindableProperty AutoScrollingModeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

AxisLineOffsetProperty

Identifies the AxisLineOffset bindable property.

Declaration

public static readonly BindableProperty AxisLineOffsetProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

AxisLineStyleProperty

Identifies the AxisLineStyle bindable property.

Declaration

public static readonly BindableProperty AxisLineStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

CrossAxisNameProperty

Identifies the CrossAxisName bindable property.

Declaration

public static readonly BindableProperty CrossAxisNameProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

CrossesAtProperty

Identifies the CrossesAt bindable property.

Declaration

public static readonly BindableProperty CrossesAtProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

EdgeLabelsDrawingModeProperty

Identifies the EdgeLabelsDrawingMode bindable property.

Declaration

public static readonly BindableProperty EdgeLabelsDrawingModeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

EnableAutoIntervalOnZoomingProperty

Identifies the EnableAutoIntervalOnZooming bindable property.

Declaration

public static readonly BindableProperty EnableAutoIntervalOnZoomingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsInversedProperty

Identifies the IsInversed bindable property.

Declaration

public static readonly BindableProperty IsInversedProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsVisibleProperty

Identifies the IsVisible bindable property.

Declaration

public static readonly BindableProperty IsVisibleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

LabelExtentProperty

Identifies the LabelExtent bindable property.

Declaration

public static readonly BindableProperty LabelExtentProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

LabelRotationProperty

Identifies the LabelRotation bindable property.

Declaration

public static readonly BindableProperty LabelRotationProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

LabelsIntersectActionProperty

Identifies the LabelsIntersectAction bindable property.

Declaration

public static readonly BindableProperty LabelsIntersectActionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

LabelsPositionProperty

Gets or sets the position of the axis labels.

Declaration

public static readonly BindableProperty LabelsPositionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

LabelStyleProperty

Identifies the LabelStyle bindable property.

Declaration

public static readonly BindableProperty LabelStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

MajorGridLineStyleProperty

Identifies the MajorGridLineStyle bindable property.

Declaration

public static readonly BindableProperty MajorGridLineStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

MajorTickStyleProperty

Identifies the MajorTickStyle bindable property.

Declaration

public static readonly BindableProperty MajorTickStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

NameProperty

Identifies the Name bindable property.

Declaration

public static readonly BindableProperty NameProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PlotOffsetEndProperty

Identifies the PlotOffsetEnd bindable property.

Declaration

public static readonly BindableProperty PlotOffsetEndProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PlotOffsetStartProperty

Identifies the PlotOffsetStart bindable property.

Declaration

public static readonly BindableProperty PlotOffsetStartProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

RenderNextToCrossingValueProperty

Identifies the RenderNextToCrossingValue bindable property.

Declaration

public static readonly BindableProperty RenderNextToCrossingValueProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ShowMajorGridLinesProperty

Identifies the ShowMajorGridLines bindable property.

Declaration

public static readonly BindableProperty ShowMajorGridLinesProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ShowTrackballLabelProperty

Identifies the ShowTrackballLabel bindable property.

Declaration

public static readonly BindableProperty ShowTrackballLabelProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TickPositionProperty

Gets or sets the position of the axis tick lines.

Declaration

public static readonly BindableProperty TickPositionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TitleProperty

Identifies the Title bindable property.

Declaration

public static readonly BindableProperty TitleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TrackballLabelStyleProperty

Identifies the TrackballLabelStyle bindable property.

Declaration

public static readonly BindableProperty TrackballLabelStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TrackballLabelTemplateProperty

Identifies the TrackballLabelTemplate bindable property.

Declaration

public static readonly BindableProperty TrackballLabelTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ZoomFactorProperty

Identifies the ZoomFactor bindable property.

Declaration

public static readonly BindableProperty ZoomFactorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ZoomPositionProperty

Identifies the ZoomPosition bindable property.

Declaration

public static readonly BindableProperty ZoomPositionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

AutoScrollingDelta

Gets or sets the delta value that specifies the range of data that should always be visible in the chart. It determines the amount of range the chart will scroll by when new data points are added, ensuring that a specified range of data is always visible.

Declaration

public double AutoScrollingDelta { get; set; }

Property Value

Type	Description
System.Double	It accepts System.Double values, and its default value is System.Double.NaN

Remarks

Note: This is only applicable for SfCartesianChart.

<chart:SfCartesianChart>
   <chart:SfCartesianChart.XAxes>
       <chart:CategoryAxis AutoScrollingDelta="3"/>
   </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xAxis = new CategoryAxis();
xAxis.AutoScrollingDelta = 3;

chart.XAxes.Add(xAxis);

AutoScrollingMode

Gets or sets the mode to determine whether the axis should be auto scrolled from the start or end positions.

Declaration

public ChartAutoScrollingMode AutoScrollingMode { get; set; }

Property Value

Type	Description
ChartAutoScrollingMode	It accepts ChartAutoScrollingMode values, and its default value is End, means that the chart will always display the most recent data points, and the axis will be automatically scrolled to the right to show the newly added data.

Remarks

Note: This is only applicable for SfCartesianChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>
   <chart:SfCartesianChart.XAxes>
       <chart:CategoryAxis AutoScrollingMode="End"/>
   </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xAxis = new CategoryAxis();
xAxis.AutoScrollingMode = ChartAutoScrollingMode.End;

chart.XAxes.Add(xAxis);

AxisLineOffset

Gets or sets a value to provide padding to the axis line.

Declaration

public double AxisLineOffset { get; set; }

Property Value

Type	Description
System.Double	It accepts `double` values and its default value is 0.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis AxisLineOffset = "30" />
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   AxisLineOffset = 30
};
chart.XAxes.Add(xaxis);

AxisLineStyle

Gets or sets the value to customize the appearance of the chart axis line.

Declaration

public ChartLineStyle AxisLineStyle { get; set; }

Property Value

Type	Description
ChartLineStyle	This property accepts the ChartLineStyle value.

Remarks

To customize the axis line appearance, you need to create an instance of the ChartLineStyle class and set to the AxisLineStyle property.

Null values are invalid.

Note: This is only applicable for the secondary axis of the SfPolarChart.

Examples

MainWindow.xaml
MainWindow.cs

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis>
                  <chart:NumericalAxis.AxisLineStyle>
                      <chart:ChartLineStyle StrokeWidth="2" Stroke="Red"/>
                  </chart:NumericalAxis.AxisLineStyle>
              </chart:NumericalAxis>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    NumericalAxis xAxis = new NumericalAxis();
    ChartLineStyle axisLineStyle = new ChartLineStyle();
    axisLineStyle.Stroke = SolidColorBrush.Red;
    axisLineStyle.StrokeWidth = 2;
    xAxis.AxisLineStyle = axisLineStyle;
    chart.XAxes.Add(xAxis);

    NumericalAxis yAxis = new NumericalAxis();
    chart.YAxes.Add(yAxis);

CrossAxisName

Gets or sets the value for the CrossAxisName of chart axis.

Declaration

public string CrossAxisName { get; set; }

Property Value

Type	Description
System.String	It accepts string value and the default value is null.

Remarks

Note: This is only applicable for SfCartesianChart.

Examples

MainWindow.xaml
MainWindow.cs

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis CrossesAt="5" CrossingAxisName="yAxis"/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis Name="yAxis"/>
          </chart:SfCartesianChart.YAxes>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    NumericalAxis yAxis = new NumericalAxis();
    NumericalAxis.Name = "yAxis";
    chart.YAxes.Add(yAxis);;

    NumericalAxis xAxis = new NumericalAxis();
    xAxis.CrossesAt = 5;
    xAxis.CrossingAxisName = "yAxis";
    chart.XAxes.Add(xAxis);

CrossesAt

Gets or sets a value that can be used to position an axis anywhere in the chart area.

Declaration

public object CrossesAt { get; set; }

Property Value

Type	Description
System.Object	The default value is double.NaN.

Remarks

Note: This is only applicable for SfCartesianChart.

Examples

MainWindow.xaml
MainWindow.cs

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis CrossesAt="{Static x:Double.MaxValue}"/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    NumericalAxis xAxis = new NumericalAxis();
    xAxis.CrossesAt = double.MaxValue;
    chart.XAxes.Add(xAxis);

    NumericalAxis yAxis = new NumericalAxis();
    chart.YAxes.Add(yAxis);

EdgeLabelsDrawingMode

Gets or sets a value to customize the rendering position of the edge labels.

Declaration

public EdgeLabelsDrawingMode EdgeLabelsDrawingMode { get; set; }

Property Value

Type	Description
EdgeLabelsDrawingMode	It accepts the EdgeLabelsDrawingMode value and its default value is Center.

Remarks

Note: This is only applicable for the secondary axis of the SfPolarChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis EdgeLabelsDrawingMode="Fit" />
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   EdgeLabelsDrawingMode= EdgeLabelsDrawingMode.Fit,
};
chart.XAxes.Add(xaxis);

EnableAutoIntervalOnZooming

Gets or sets a value indicating whether to calculate the axis intervals on zooming.

Declaration

public bool EnableAutoIntervalOnZooming { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the bool values and its default value is `True`.

Remarks

Note: This is only applicable for SfCartesianChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis EnableAutoIntervalOnZooming = "False" />
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   EnableAutoIntervalOnZooming = false,
};
chart.XAxes.Add(xaxis);

IsInversed

Gets or sets the value that indicates whether the axis' visible range is inversed.

Declaration

public bool IsInversed { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the bool values and its default value is `False`.

Remarks

When the axis is inversed, it will render points from right to left for the horizontal axis, and top to bottom for the vertical axis.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis IsInversed ="True" />
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   IsInversed = true,
};
chart.XAxes.Add(xaxis);

IsVisible

Gets or sets a value indicating whether to show/hide the chart axis.

Declaration

public bool IsVisible { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and its default value is `True`.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis IsVisible = "False" />
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   IsVisible = false
};
chart.XAxes.Add(xaxis);

LabelExtent

Gets or sets the value that determines the distance between the axis label and axis title.

Declaration

public double LabelExtent { get; set; }

Property Value

Type	Description
System.Double	This property take double value.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis LabelExtent="30" />
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis LabelExtent="30" />
    </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   LabelExtent= 30
};

NumericalAxis yaxis = new NumericalAxis()
{
   LabelExtent= 30
};

chart.XAxes.Add(xaxis);
chart.YAxes.Add(yaxis);

LabelRotation

Gets or sets the value for the rotation angle of the axis labels.

Declaration

public double LabelRotation { get; set; }

Property Value

Type	Description
System.Double	It accepts the `double` values and the default value is 0.

Remarks

Label rotation angle can be set from -90 to 90 degrees.

Note: This is only applicable for the secondary axis of the SfPolarChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis LabelRotation = "90" />
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   LabelRotation = 90,
};
chart.XAxes.Add(xaxis);

LabelsIntersectAction

Gets or sets a value that determines the mechanism for avoiding the overlapping of axis labels. The overlapping labels can be hidden, wrapped or placed on the next row.

Declaration

public AxisLabelsIntersectAction LabelsIntersectAction { get; set; }

Property Value

Type	Description
AxisLabelsIntersectAction	It accepts AxisLabelsIntersectAction values and the default value is Hide.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis LabelsIntersectAction="Wrap"/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis LabelsIntersectAction="Wrap"/>
    </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   LabelsIntersectAction= AxisLabelsIntersectAction.Wrap
};

NumericalAxis yaxis = new NumericalAxis()
{
  LabelsIntersectAction= AxisLabelsIntersectAction.Wrap
};

chart.XAxes.Add(xaxis);
chart.YAxes.Add(yaxis);

LabelsPosition

Gets or sets the position of the axis labels.

Declaration

public AxisElementPosition LabelsPosition { get; set; }

Property Value

Type	Description
AxisElementPosition	It accepts AxisElementPosition values and its default value is Outside.

Remarks

Edge labels may overlap when both primary and secondary axis labels are positioned inside. In this case, we can utilize the inside element support, depending on the scenario.

Note: This is only applicable for the secondary axis of the SfPolarChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis LabelsPosition="Inside" />
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis LabelsPosition="Inside" />
    </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   LabelsPosition = AxisElementPosition.Inside
};

NumericalAxis yaxis = new NumericalAxis()
{ 
   LabelsPosition = AxisElementPosition.Inside
};

chart.XAxes.Add(xaxis);
chart.YAxes.Add(yaxis);

LabelStyle

Gets or sets the value to customize the appearance of chart axis labels.

Declaration

public ChartAxisLabelStyle LabelStyle { get; set; }

Property Value

Type	Description
ChartAxisLabelStyle	It accepts the ChartAxisLabelStyle value.

Remarks

To customize the axis labels appearance, you need to create an instance of the ChartAxisLabelStyle class and set to the LabelStyle property.

Null values are invalid.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis>
           <chart:CategoryAxis.LabelStyle>
               <chart:ChartAxisLabelStyle TextColor = "Red" FontSize="14"/>
           </chart:CategoryAxis.LabelStyle>
       </chart:CategoryAxis>
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis();
xaxis.LabelStyle = new ChartAxisLabelStyle()
{
    TextColor = Colors.Red,
    FontSize = 14,
};
chart.XAxes.Add(xaxis);

MajorGridLineStyle

Gets or sets the ChartLineStyle to customize the appearance of the major grid lines.

Declaration

public ChartLineStyle MajorGridLineStyle { get; set; }

Property Value

Type	Description
ChartLineStyle	It accepts the ChartLineStyle.

Remarks

To customize the major grid line appearance, you need to create an instance of the ChartLineStyle class and set to the MajorGridLineStyle property.

Null values are invalid.

Examples

MainWindow.xaml
MainWindow.cs

    <chart:SfCartesianChart>

         <chart:SfCartesianChart.Resources>
             <DoubleCollection x:Key="dashArray">
                 <x:Double>3</x:Double>
                 <x:Double>3</x:Double>
             </DoubleCollection>
         </chart:SfCartesianChart.Resources>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis>
                  <chart:NumericalAxis.MajorGridLineStyle>
                      <chart:ChartLineStyle StrokeDashArray="{StaticResource dashArray}" Stroke="Black" StrokeWidth="2" />
                  </chart:NumericalAxis.MajorGridLineStyle>
              </chart:NumericalAxis>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    DoubleCollection doubleCollection = new DoubleCollection();
    doubleCollection.Add(3);
    doubleCollection.Add(3);

    NumericalAxis xAxis = new NumericalAxis();
    ChartLineStyle axisLineStyle = new ChartLineStyle();
    axisLineStyle.Stroke = SolidColorBrush.Black;
    axisLineStyle.StrokeWidth = 2;
    axisLineStyle.StrokeDashArray = doubleCollection
    xAxis.MajorGridLineStyle = axisLineStyle;
    chart.XAxes.Add(xAxis);

    NumericalAxis yAxis = new NumericalAxis();
    chart.YAxes.Add(yAxis);

MajorTickStyle

Gets or sets the ChartAxisTickStyle to customize the appearance of the major tick lines.

Declaration

public ChartAxisTickStyle MajorTickStyle { get; set; }

Property Value

Type	Description
ChartAxisTickStyle	It accepts the ChartAxisTickStyle value.

Remarks

To customize the axis major tick line appearance, you need to create an instance of the ChartAxisTickStyle class and set to the MajorTickStyle property.

Null values are invalid.

Examples

MainWindow.xaml
MainWindow.cs

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis MinorTicksPerInterval="4">
                  <chart:NumericalAxis.MajorTickStyle>
                      <chart:ChartAxisTickStyle Stroke="Red" StrokeWidth="1"/>
                  </chart:NumericalAxis.MajorTickStyle>
              </chart:NumericalAxis>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    NumericalAxis xAxis = new NumericalAxis();
    xAxis.MajorTickStyle.StrokeWidth = 1;
    xAxis.MajorTickStyle.Stroke = SolidColorBrush.Red;
    chart.XAxes.Add(xAxis);

    NumericalAxis yAxis = new NumericalAxis();
    chart.YAxes.Add(yAxis)

Name

Gets or sets the unique name of the axis, which will be used to identify the segment axis of the strip line.

Declaration

public string Name { get; set; }

Property Value

Type	Description
System.String	This property takes the string value.

PlotOffsetEnd

Gets or sets a value to provide padding to the axis at end position.

Declaration

public double PlotOffsetEnd { get; set; }

Property Value

Type	Description
System.Double	It accepts `double` values and its default value is 0.

Remarks

PlotOffsetEnd applies padding at end of the plot area where the axis and its elements are rendered in the chart with padding at the end.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis PlotOffsetEnd = "30" />
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis PlotOffsetEnd = "30" />
    </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   PlotOffsetEnd = 30
};

NumericalAxis yaxis = new NumericalAxis()
{
   PlotOffsetEnd = 30
};

chart.XAxes.Add(xaxis);
chart.YAxes.Add(yaxis);

PlotOffsetStart

Gets or sets a value to provide padding to the axis at the start position.

Declaration

public double PlotOffsetStart { get; set; }

Property Value

Type	Description
System.Double	It accepts `double` values and its default value is 0.

Remarks

PlotOffsetStart applies padding at the start of a plot area where the axis and its elements are rendered in a chart with padding at the start.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis PlotOffsetStart = "30" />
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis PlotOffsetStart = "30" />
    </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   PlotOffsetStart = 30
};

NumericalAxis yaxis = new NumericalAxis()
{
   PlotOffsetStart = 30
};

chart.XAxes.Add(xaxis);
chart.YAxes.Add(yaxis);

RenderNextToCrossingValue

Gets or sets a value that determines whether the crossing axis should be placed at the crossing position or not.

Declaration

public bool RenderNextToCrossingValue { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and the default value is `True`.

Remarks

Note: This is only applicable for SfCartesianChart.

Examples

MainWindow.xaml
MainWindow.cs

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis RenderNextToCrossingValue="False"/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    NumericalAxis xAxis = new NumericalAxis();
    xAxis.RenderNextToCrossingValue = false;
    chart.XAxes.Add(xAxis);

    NumericalAxis yAxis = new NumericalAxis();
    chart.YAxes.Add(yAxis);

ShowMajorGridLines

Gets or sets a value indicating whether the axis grid lines can be displayed or not.

Declaration

public bool ShowMajorGridLines { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the bool value and its default value is `True`.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis ShowMajorGridLines = "False" />
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   ShowMajorGridLines = false,
};
chart.XAxes.Add(xaxis);

ShowTrackballLabel

Gets or sets the value that indicates whether to show the trackball axis label.

Declaration

public bool ShowTrackballLabel { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the bool values and its default value is `True`.

Remarks

Note: This is only applicable for SfCartesianChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis ShowTrackballLabel = "True" />
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   ShowTrackballLabel = true,
};
chart.XAxes.Add(xaxis);

TickPosition

Gets or sets the position of the axis tick lines.

Declaration

public AxisElementPosition TickPosition { get; set; }

Property Value

Type	Description
AxisElementPosition	It accepts AxisElementPosition values and its default value is Outside.

Remarks

Note: This is only applicable for the secondary axis of the SfPolarChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis TickPosition="Inside" />
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis TickPosition="Inside" />
    </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis()
{
   TickPosition = AxisElementPosition.Inside 
};

NumericalAxis yaxis = new NumericalAxis()
{
   TickPosition = AxisElementPosition.Inside 
};

chart.XAxes.Add(xaxis);
chart.YAxes.Add(yaxis);

Title

Gets or sets the title for the chart axis.

Declaration

public ChartAxisTitle Title { get; set; }

Property Value

Type	Description
ChartAxisTitle	It accepts ChartAxisTitle value.

Remarks

The ChartAxisTitle provides options to customize the text and font of axis title.

Note: This is only applicable for the secondary axis of the SfPolarChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis>
           <chart:CategoryAxis.Title>
               <chart:ChartAxisTitle Text="Category"/>
           </chart:CategoryAxis.Title>
       </chart:CategoryAxis>
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis();
xaxis.Title = new ChartAxisTitle()
{
    Text = "Category"
};
chart.XAxes.Add(xaxis);

TrackballLabelStyle

Gets or sets option for customize the trackball axis label.

Declaration

public ChartLabelStyle TrackballLabelStyle { get; set; }

Property Value

Type	Description
ChartLabelStyle	It accepts the bool values and its default value is `True`.

Remarks

To customize the trackball label appearance, you need to create an instance of the ChartLabelStyle class and set to the TrackballLabelStyle property.

Null values are invalid.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis ShowTrackballLabel="True">
           <chart:CategoryAxis.TrackballLabelStyle>
               <chart:ChartLabelStyle Background = "Black" TextColor="White"/>
          </chart:CategoryAxis.TrackballLabelStyle>
       </chart:CategoryAxis>
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();
var trackballLabelStyle = new ChartLabelStyle()
{ 
    Background = new SolidColorBrush(Colors.Black),
    TextColor = Colors.White,
};
CategoryAxis xaxis = new CategoryAxis()
{
   ShowTrackballLabel = true,
   TrackballLabelStyle = trackballLabelStyle,
};
chart.XAxes.Add(xaxis);

Note: This is only applicable for SfCartesianChart.

TrackballLabelTemplate

Gets or sets the DataTemplate to customize the appearance of the axis Trackball labels.

Declaration

public DataTemplate TrackballLabelTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	It accepts the Microsoft.Maui.Controls.DataTemplatevalue and its default value is null.

Examples

MainWindow.xaml
MainPage.xaml.cs

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.TrackballBehavior>
               <chart:ChartTrackballBehavior  />
          </chart:SfCartesianChart.TrackballBehavior>

          <chart:SfCartesianChart.Resources>
              <DataTemplate x:Key="AxisTrackballTemplate">
                 <HorizontalStackLayout>
                    <Image Source="image.png" 
                           WidthRequest="20" 
                           HeightRequest="20"/>
                    <Label Text="{Binding Label}" 
                           TextColor="Black"
                           FontAttributes="Bold"
                           FontSize="12"/>
                 </HorizontalStackLayout>
              </DataTemplate>
          </chart:SfCartesianChart.Resources>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis ShowTrackballLabel = "True"
                                   TrackballLabelTemplate="{StaticResource AxisTrackballTemplate}" />
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

          <chart:SfCartesianChart.Series>
              <chart:LineSeries ItemsSource="{Binding Data}"
                                  XBindingPath="XValue"
                                  YBindingPath="YValue">
              </chart:LineSeries> 
          </chart:SfCartesianChart.Series>

    </chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

ChartTrackballBehavior trackballBehavior = new ChartTrackballBehavior();
chart.TrackballBehavior = trackballBehavior;

 NumericalAxis xAxis = new NumericalAxis();
 xAxis.ShowTrackballLabel = true;

 NumericalAxis yAxis = new NumericalAxis();

LineSeries series = new LineSeries();
series.ItemsSource = new ViewModel().Data;
series.XBindingPath = "XValue";
series.YBindingPath = "YValue";

DataTemplate axisLabelTemplate = new DataTemplate(()=>
{
    HorizontalStackLayout layout = new HorizontalStackLayout();
    Image image = new Image()
    {
        Source = "image.png",
        WightRequest = 20,
        HeightRequest = 20
    };

    Label label = new Label()
    {
        TextColor = Colors.Black,
        FontAttributes = FontAttributes.Bold,
        FontSize = 12,
    }

    label.SetBinding(Label.TextProperty, new Binding("Label"));
    layout.Children.Add(image);
    layout.Children.Add(label);
    return layout;
}    

xAxis.TrackballLabelTemplate = axisLabelTemplate;

 chart.XAxes.Add(xAxis);
 chart.YAxes.Add(yAxis);
 chart.Series.Add(series);

VisibleLabels

Gets the axis labels visible

Declaration

public ObservableCollection<ChartAxisLabel> VisibleLabels { get; }

Property Value

Type
System.Collections.ObjectModel.ObservableCollection<ChartAxisLabel>

VisibleMaximum

Gets the double value that represents the maximum visible value of the axis range.

Declaration

public double VisibleMaximum { get; }

Property Value

Type
System.Double

VisibleMinimum

Gets the double value that represents the minimum visible value of the axis range.

Declaration

public double VisibleMinimum { get; }

Property Value

Type
System.Double

ZoomFactor

Gets or sets the value that defines the percentage of the visible range from the total range of axis values.

Declaration

public double ZoomFactor { get; set; }

Property Value

Type	Description
System.Double	It accepts the double values and its default value is 1.

Remarks

The value must be between 0 and 1.

Note: This is only applicable for SfCartesianChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

        <chart:SfCartesianChart.XAxes>
            <chart:CategoryAxis ZoomFactor="0.3" ZoomPosition="0.5" />
        </chart:SfCartesianChart.XAxes>

        <chart:SfCartesianChart.ZoomPanBehavior>
             <chart:ChartZoomPanBehavior/>
        </chart:SfCartesianChart.ZoomPanBehavior>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis(){  ZoomFactor = 0.3, ZoomPosition = 0.5  };
chart.XAxes.Add(xaxis);	

ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();
chart.ZoomPanBehavior = zoomPanBehavior;

ZoomPosition

Gets or sets the value that defines the zoom position for the actual range of the axis.

Declaration

public double ZoomPosition { get; set; }

Property Value

Type	Description
System.Double	It accepts the double values and its default value is 0.

Remarks

The value must be between 0 and 1.

Note: This is only applicable for SfCartesianChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

        <chart:SfCartesianChart.XAxes>
            <chart:CategoryAxis ZoomFactor="0.3" ZoomPosition="0.5" />
        </chart:SfCartesianChart.XAxes>

        <chart:SfCartesianChart.ZoomPanBehavior>
             <chart:ChartZoomPanBehavior/>
        </chart:SfCartesianChart.ZoomPanBehavior>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis(){  ZoomFactor = 0.3, ZoomPosition = 0.5  };
chart.XAxes.Add(xaxis);

chart.ZoomPanBehavior = new ChartZoomPanBehavior();

Methods

ApplyRangePadding(DoubleRange, Double)

Declaration

protected virtual DoubleRange ApplyRangePadding(DoubleRange range, double interval)

Parameters

Type	Name	Description
DoubleRange	range
System.Double	interval

Returns

Type
DoubleRange

CalculateActualInterval(DoubleRange, Size)

Declaration

protected virtual double CalculateActualInterval(DoubleRange range, Size availableSize)

Parameters

Type	Name	Description
DoubleRange	range
Microsoft.Maui.Graphics.Size	availableSize

Returns

Type
System.Double

CalculateActualRange()

Declaration

protected virtual DoubleRange CalculateActualRange()

Returns

Type
DoubleRange

CalculateNiceInterval(DoubleRange, Size)

Declaration

protected virtual double CalculateNiceInterval(DoubleRange actualRange, Size availableSize)

Parameters

Type	Name	Description
DoubleRange	actualRange
Microsoft.Maui.Graphics.Size	availableSize

Returns

Type
System.Double

CalculateVisibleInterval(DoubleRange, Size)

Declaration

protected virtual double CalculateVisibleInterval(DoubleRange visibleRange, Size availableSize)

Parameters

Type	Name	Description
DoubleRange	visibleRange
Microsoft.Maui.Graphics.Size	availableSize

Returns

Type
System.Double

CalculateVisibleRange(DoubleRange, Size)

Declaration

protected virtual DoubleRange CalculateVisibleRange(DoubleRange actualRange, Size availableSize)

Parameters

Type	Name	Description
DoubleRange	actualRange
Microsoft.Maui.Graphics.Size	availableSize

Returns

Type
DoubleRange

ComputeDesiredSize(Size)

Declaration

protected virtual Size ComputeDesiredSize(Size availableSize)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.Size	availableSize

Returns

Type
Microsoft.Maui.Graphics.Size

DrawAxis(ICanvas, Rect)

Declaration

protected virtual void DrawAxis(ICanvas canvas, Rect arrangeRect)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
Microsoft.Maui.Graphics.Rect	arrangeRect

DrawAxisLine(ICanvas, Single, Single, Single, Single)

Declaration

protected virtual void DrawAxisLine(ICanvas canvas, float x1, float y1, float x2, float y2)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
System.Single	x1
System.Single	y1
System.Single	x2
System.Single	y2

DrawGridLine(ICanvas, Double, Single, Single, Single, Single)

Declaration

protected virtual void DrawGridLine(ICanvas canvas, double position, float x1, float y1, float x2, float y2)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
System.Double	position
System.Single	x1
System.Single	y1
System.Single	x2
System.Single	y2

DrawMajorTick(ICanvas, Double, PointF, PointF)

Declaration

protected virtual void DrawMajorTick(ICanvas canvas, double tickPosition, PointF point1, PointF point2)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
System.Double	tickPosition
Microsoft.Maui.Graphics.PointF	point1
Microsoft.Maui.Graphics.PointF	point2

DrawMinorTick(ICanvas, Double, PointF, PointF)

Declaration

protected virtual void DrawMinorTick(ICanvas canvas, double tickPosition, PointF point1, PointF point2)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
System.Double	tickPosition
Microsoft.Maui.Graphics.PointF	point1
Microsoft.Maui.Graphics.PointF	point2

GetActualDesiredIntervalsCount(Size)

Declaration

protected double GetActualDesiredIntervalsCount(Size availableSize)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.Size	availableSize

Returns

Type
System.Double

OnBindingContextChanged()

Declaration

protected override void OnBindingContextChanged()

OnCreateLabels()

Using this method, we can adjust the axis labels visible

Declaration

protected virtual void OnCreateLabels()

OnLabelCreated(ChartAxisLabel)

Declaration

protected virtual void OnLabelCreated(ChartAxisLabel label)

Parameters

Type	Name	Description
ChartAxisLabel	label

OnParentSet()

Declaration

protected override void OnParentSet()

PointToValue(Double, Double)

Declaration

public double PointToValue(double x, double y)

Parameters

Type	Name	Description
System.Double	x
System.Double	y

Returns

Type
System.Double

ValueToPoint(Double)

Declaration

public float ValueToPoint(double value)

Parameters

Type	Name	Description
System.Double	value

Returns

Type
System.Single

Events

ActualRangeChanged

This event occurs when the actual range is changed.

Declaration

public event EventHandler<ActualRangeChangedEventArgs> ActualRangeChanged

Event Type

Type
System.EventHandler<ActualRangeChangedEventArgs>

Remarks

The ActualRangeChangedEventArgs contains information on the chart axis' minimum and maximum values.

Examples

MainWindow.xaml
MainWindow.cs

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis ActualRangeChanged="xAxis_ActualRangeChanged"/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    NumericalAxis xAxis = new NumericalAxis();
    NumericalAxis yAxis = new NumericalAxis();

    chart.XAxes.Add(xAxis);
    chart.YAxes.Add(yAxis);

    xAxis.ActualRangeChanged += xAxis_ActualRangeChanged;

    private void xAxis_ActualRangeChanged(object sender, Syncfusion.Maui.Charts.ActualRangeChangedEventArgs e)
    {
        e.VisibleMinimum = 2;
        e.VisibleMaximum = 5;
        e.ActualMinimum = 0;
        e.ActualMaximum = 8;
    }

LabelCreated

This event occurs when the axis label is created.

Declaration

public event EventHandler<ChartAxisLabelEventArgs> LabelCreated

Event Type

Type
System.EventHandler<ChartAxisLabelEventArgs>

Remarks

The ChartAxisLabelEventArgs contains the information of AxisLabel.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis LabelCreated="OnLabelCreated" />
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xaxis = new CategoryAxis();
xaxis.LabelCreated += OnLabelCreated;
chart.XAxes.Add(xaxis);

private void OnLabelCreated(object sender, ChartAxisLabelEventArgs e)
{
     // You can customize the content of the axis label.
}