Inconsistency between SfChart using Xamarin Forms SfChart

[Paul Pringle]

Using version 18.4.0.44 of SyncFusion SfChart for Xamarin Forms, there are some differences between the platforms that would be good to fix.  Here are the issues I've found (see attachment)

1. On iOS, the value of 54 is missing on the Y axis, but it displays just fine on Android.

2. On Android, I have the double the strokewidth on everything to make it look the same on iOS. Why is that?

3. On Android, the correct font is not used on the X axis (Works fine on iOS)

4. On Android, the tick marks look so faint on the X axis as compared to iOS.

Code is here:

<chart:SfChart
   Grid.Row="0"
   ChartPadding="{StaticResource GraphPadding}">

   <!-- X AXIS -->
   <chart:SfChart.PrimaryAxis>
      <helpers:TimeAxis
         ShowMajorGridLines="False"
         ShowMinorGridLines="False"
         Interval="1440"
         Minimum="0"
         Maximum="1440"
         MinorTicksPerInterval="2">

         <chart:NumericalAxis.AxisLineStyle>
            <chart:ChartLineStyle StrokeWidth ="{StaticResource LineStrokeWidthAxis}" StrokeColor="{StaticResource GreyLightColor}" />
         </chart:NumericalAxis.AxisLineStyle>

         <chart:NumericalAxis.LabelStyle>
            <chart:ChartAxisLabelStyle
               TextColor="{StaticResource GreyDarkColor}"
               FontFamily="{StaticResource GraphFontFamily}"
               FontSize="12"
               FontAttributes="Bold"/>
         </chart:NumericalAxis.LabelStyle>

         <chart:NumericalAxis.MajorTickStyle >
            <chart:ChartAxisTickStyle TickSize="6" StrokeWidth="2" StrokeColor="{StaticResource GreyLightColor}" />
         </chart:NumericalAxis.MajorTickStyle>

         <chart:NumericalAxis.MinorTickStyle>
            <chart:ChartAxisTickStyle TickSize="4" StrokeWidth="1" StrokeColor="{StaticResource GreyLightColor}" />
         </chart:NumericalAxis.MinorTickStyle>

      </helpers:TimeAxis>

   </chart:SfChart.PrimaryAxis>

   <!-- Y AXIS -->
   <chart:SfChart.SecondaryAxis>
      <helpers:GlucoseAxis
         ShowMajorGridLines="False"
         ShowMinorGridLines="False"
         Minimum="0"
         Maximum="300"
         Interval="300">

         <chart:NumericalAxis.Title>
            <chart:ChartAxisTitle
               Text="{Binding YaxisLabel}"
               TextColor="{StaticResource GreyDarkColor}"
               FontFamily="{StaticResource GraphFontFamily}"
               FontSize="12"
               FontAttributes="Bold"
               Margin="2, 0, 0, -6"/>
         </chart:NumericalAxis.Title>

         <chart:NumericalAxis.AxisLineStyle>
            <chart:ChartLineStyle StrokeWidth ="{StaticResource LineStrokeWidthAxis}" StrokeColor="{StaticResource GreyLightColor}"/>
         </chart:NumericalAxis.AxisLineStyle>

         <chart:NumericalAxis.LabelStyle>
            <chart:ChartAxisLabelStyle
               TextColor="{StaticResource GreyDarkColor}"
               FontFamily="{StaticResource GraphFontFamily}"
               FontSize="12"
               FontAttributes="Bold"/>
         </chart:NumericalAxis.LabelStyle>

         <chart:NumericalAxis.MajorTickStyle >
            <chart:ChartAxisTickStyle StrokeWidth="0"/>
         </chart:NumericalAxis.MajorTickStyle>

         <chart:NumericalAxis.StripLines>
            <chart:NumericalStripLine Start="300" Width ="0.1" StrokeColor="{StaticResource GreyLightColor}" StrokeWidth="{StaticResource LineStrokeWidthMaxYaxis}"/>
            <chart:NumericalStripLine Start="70" Width ="110" FillColor="{StaticResource GreenColor}"/>
         </chart:NumericalAxis.StripLines>

      </helpers:GlucoseAxis>
   </chart:SfChart.SecondaryAxis>

   <chart:SfChart.Series>
      <chart:SplineSeries
         ItemsSource ="{Binding LinePoints}"
         XBindingPath="Minute"
         YBindingPath="Glucose.ValueInCurrentUnit"
         Color="{StaticResource BlackColor}"
         StrokeWidth="5"/>

      <chart:StepLineSeries
         ItemsSource="{Binding OrangeLinePoints}"
         XBindingPath="Minutes"
         YBindingPath="Limit.ValueInCurrentUnit"
         Color="{StaticResource OrangeColor}"
         StrokeWidth="2" />

      <chart:StepLineSeries
         ItemsSource="{Binding RedLinePoints}"
         XBindingPath="Minutes"
         YBindingPath="Limit.ValueInCurrentUnit"
         Color="{StaticResource RedColor}"
         StrokeWidth="2" />
   </chart:SfChart.Series>
</chart:SfChart>

Attachment: sfchart.png_fd339bb7.zip

[Yuvaraj Palanisamy]

Hi Adam Scroggin, 

 

Greetings from Syncfusion. 

 

1. On iOS, the value of 54 is missing on the Y axis, but it displays just fine on Android.    

 

We have checked the reported problem “The custom axis labels are missing in iOS” at our end it was working fine at our end. Please find the code example below. 

 

public class NumericalAxisExt : NumericalAxis 

{ 

    protected override void OnCreateLabels() 

    { 

        base.OnCreateLabels(); 

 

        this.VisibleLabels.Add(new ChartAxisLabel(54, "54")); 

        this.VisibleLabels.Add(new ChartAxisLabel(70, "70")); 

        this.VisibleLabels.Add(new ChartAxisLabel(180, "180")); 

        this.VisibleLabels.Add(new ChartAxisLabel(250, "250")); 

    } 

} 

 

3. On Android, the correct font is not used on the X axis (Works fine on iOS) 

 

We have checked with custom font family in SfChart and it was working fine at our end. And we have suspect that the setting of custom font family for Android is missing. Could you please ensure the below code example at your end. 

 

<OnPlatform x:Key="Montserrat-Medium" x:TypeArguments="x:String"> 

    <OnPlatform.Platforms> 

        <On Platform="Android" Value="Montserrat-Medium.ttf#Montserrat-Medium" /> 

        <On Platform="iOS" Value="Montserrat-Medium" /> 

        <On Platform="UWP" Value="Assets/Montserrat-Medium.ttf#Montserrat-Medium" /> 

    </OnPlatform.Platforms> 

</OnPlatform> 

 

#2 & #4 On Android, I have the double the strokewidth on everything to make it look the same on iOS. Why is that? and On Android, the tick marks look so faint on the X axis as compared to iOS. 

 

We have checked the reported problem and we have confirmed “StrokeWidth does not updated properly for axis line and tick line in Android” as an issue. The fix of the reported issue will be included in our weekly NuGet release (expected on March 15, 2021). We appreciate your patience until then. We will let you know once it gets rolled out.  

    

You can now track the status of your request, review the proposed resolution timeline and contact us for any further inquiries through this link.     

   

Feedback link: https://www.syncfusion.com/feedback/22891/android-strokewidth-does-not-updated-properly-for-axis-line-and-tick-line   

     

Note: The provided feedback link is private, and you need to login to view this feedback  

 

Regards, 

Yuvaraj 

[Saravanan Madheswaran]

Hi Adam, 

 

As we updated before, that the fix for “StrokeWidth does not updated properly for axis line and tick line ” was included at our upcoming weekly nuget, it scheduled to be roll out by tomorrow(16th March 2021). We will update you once it get published.  

 

Regards, 

Saravanan.  

[Yuvaraj Palanisamy]

Hi Adam, 

 

We are glad to announce that our weekly NuGet was rolled out and fix for the reported issue was included in the weekly NuGet.

NuGet Version: 18.4.0.48

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Regards, 

Yuvaraj.