We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfChart |
Published Date: October 17, 2019 |
Last Revised Date: May 7, 2020

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

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile