Axis in Xamarin Charts (SfChart)

8 Aug 202324 minutes to read

Charts typically have two axes that are used to measure and categorize data: a vertical (Y) axis, and a horizontal (X) axis.

Vertical(Y) axis always uses numerical scale. Horizontal(X) axis supports the following types of scale:

Category
Numeric
Date time
Logarithmic Axis

Category Axis

Category axis displays text labels instead of numbers.

XAML
C#
<chart:SfChart.PrimaryAxis >

	<chart:CategoryAxis />

</chart:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis();

Category axis support in Xamarin.Forms Chart

Placing labels between ticks

Labels in category axis can be placed between the ticks by setting LabelPlacement to BetweenTicks. Default value of LabelPlacement property is OnTicks i.e. labels will be placed on the ticks by default.

XAML
C#
<chart:SfChart.PrimaryAxis >

	<chart:CategoryAxis LabelPlacement="BetweenTicks"/>

</chart:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis() { LabelPlacement = LabelPlacement.BetweenTicks };

Axis labels between ticks support in Xamarin.Forms Chart

Displaying labels after a fixed interval

To display labels after a fixed interval n, you can set Interval property of ChartAxis as n. Default value of interval is 1 i.e. all the labels will be displayed by default.

XAML
C#
<chart:SfChart.PrimaryAxis >

	<chart:CategoryAxis Interval="2" LabelPlacement="BetweenTicks"/>

</chart:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis() { Interval = 2, LabelPlacement = LabelPlacement.BetweenTicks };

Enable or disable the axis auto-interval support in Xamarin.Forms Chart

Indexed category axis

Category axis can also be rendered based on the index values of data source by setting the ArrangeByIndex property to true in the axis.

XAML
C#
<chart:SfChart.PrimaryAxis>

	  <chart:CategoryAxis ArrangeByIndex="False" />

</chart:SfChart.PrimaryAxis>

<chart:SfChart.Series>

      <chart:ColumnSeries ItemsSource="{Binding Data1}"  XBindingPath="Country" YBindingPath="Year2016"/>
       
      <chart:ColumnSeries ItemsSource="{Binding Data2}"  XBindingPath="Country" YBindingPath="Year2016"/>

</chart:SfChart.Series>
chart.PrimaryAxis = new CategoryAxis() 
{ 
	ArrangeByIndex = false 
};

ColumnSeries series1 = new ColumnSeries()
 {
        ItemsSource = viewmodel.Data1,
        XBindingPath = "Country",
        YBindingPath = "Year2016"
 };
 ColumnSeries series2 = new ColumnSeries()
 {
        ItemsSource = viewmodel.Data2,
        XBindingPath = "Country",
        YBindingPath = "Year2016",
 };

chart.Series.Add(series1);
chart.Series.Add(series2);

Category axis indexed support in Xamarin.Forms Chart

Numeric Axis

Numeric axis uses numerical scale and displays numbers as labels.

XAML
C#
<chart:SfChart.PrimaryAxis >

	<chart:NumericalAxis/>

</chart:SfChart.PrimaryAxis>
chart.PrimaryAxis = new NumericalAxis();

Numerical axis support in Xamarin.Forms Chart

Customizing numeric range

To customize the range of an axis, you can use the Minimum and Maximum properties of NumericalAxis. By default, nice range will be calculated automatically based on the provided data.

XAML
C#
<chart:SfChart.SecondaryAxis >

	<chart:NumericalAxis Minimum="10" Maximum="50"/>

</chart:SfChart.SecondaryAxis >
chart.SecondaryAxis = new NumericalAxis() { Minimum = 10, Maximum = 50 };

NumericalAxis range customization support in Xamarin.Forms Chart

Customizing numeric interval

Axis interval can be customized using the Interval property of ChartAxis. By default, nice interval will be calculated based on the minimum and maximum value of the provided data.

XAML
C#
<chart:SfChart.SecondaryAxis >

	<chart:NumericalAxis Interval="10"/>

</chart:SfChart.SecondaryAxis >
chart.SecondaryAxis = new NumericalAxis() { Interval = 10 };

NumericalAxis interval customization support in Xamarin.Forms Chart

Apply padding to the range

Padding can be applied to the minimum and maximum extremes of the axis range by using RangePadding property. Numeric axis supports the following types of padding.

None
Round
Additional
Normal
RoundStart
RoundEnd
PrependInterval
AppendInterval

None

When the value of RangePadding property is None, padding will not be applied to the axis. This is also the default value of RangePadding for horizontal axis.

XAML
C#
<chart:SfChart.SecondaryAxis>

	<chart:NumericalAxis RangePadding="None"/>

</chart:SfChart.SecondaryAxis>
chart.SecondaryAxis = new NumericalAxis() { RangePadding = NumericalPadding.None };