Articles in this section
Category / Section

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

1 min read

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.

Chart with PlotOffset

 

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>

 

Chart with RangePadding in NumericalAxis

 

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>

Chart with RangePadding in DateTimeAxis

 

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.

Chart with Minimum and Maximum

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied