How to view corner segments without cutting in edge of Xamarin.Forms Chart?

Description:

This article describes how to view a segment without cutting in edge of SfChart.

Solution 1:

You can view the edge segments without cutting in SfChart by setting PlotOffset in axis as demonstrated in the following code snippet.

<chart:SfChart.PrimaryAxis> 
   <chart:CategoryAxis PlotOffset="12" LabelFormat="MMM"/>                 
</chart:SfChart.PrimaryAxis> 
 
<chart:SfChart.SecondaryAxis> 
   <chart:NumericalAxis PlotOffset="15"/> 
</chart:SfChart.SecondaryAxis> 

The following screenshot illustrates the PlotOffset applied in both axes.

Solution 2:

You can view the edge segments without cutting in SfChart by setting RangePadding as Additional in axis as demonstrated in the following code snippet.

If you are using PrimaryAxis as NumericalAxis, you can use the following solution.

<chart:SfChart.PrimaryAxis>
   <chart:NumericalAxis RangePadding="Additional" />
</chart:SfChart.PrimaryAxis>
 
<chart:SfChart.SecondaryAxis>
  <chart:NumericalAxis RangePadding="Additional"/>
</chart:SfChart.SecondaryAxis>

If you are using PrimaryAxis as DateTimeAxis, you can use the following solution.

<chart:SfChart.PrimaryAxis>
  <chart:DateTimeAxis RangePadding="Additional" LabelFormat="MMM"/>
</chart:SfChart.PrimaryAxis>
 
<chart:SfChart.SecondaryAxis>
  <chart:NumericalAxis RangePadding="Additional"/>
</chart:SfChart.SecondaryAxis>

Solution 3:

You can view the edge segments without cutting in SfChart by setting Minimum and Maximum in axes as demonstrated in the following code snippet.

If you are using PrimaryAxis as NumericalAxis, you can use the following solution.

<chart:SfChart.PrimaryAxis>
  <chart:NumericalAxis Minimum="0" Maximum="4"/>
</chart:SfChart.PrimaryAxis>
 
<chart:SfChart.SecondaryAxis>
  <chart:NumericalAxis Minimum="4" Maximum="16"/>
</chart:SfChart.SecondaryAxis>

The following screenshot illustrates the Minimum and Maximum applied to both axes.