Empty SfChart not rendering properly on iOS

I have an SfChart that does not render correctly on iOS when the app is first started. It does render correctly on Windows. When the curves are calculated and displayed, the rendering is correct. I am using Xamarin forms. I have attached a zip file with iOS and Windows screen shots and the complete XAML.

Here is the XAML for the SfChart:

        <xForms1:SfChart x:Name="Chart" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
                         HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                         Series="{Binding SeriesCollection, Mode=OneWay}">
            <xForms1:SfChart.Title>
                <xForms1:ChartTitle Text="Resistivity Measurements" FontSize="15" />
            </xForms1:SfChart.Title>
            <xForms1:SfChart.PrimaryAxis>
                <xForms1:NumericalAxis Minimum="{Binding XPlotMin}" Maximum="{Binding XPlotMax}">
                    <xForms1:NumericalAxis.Title>
                        <xForms1:ChartAxisTitle Text="Measured Depth (m)" />
                    </xForms1:NumericalAxis.Title>
                </xForms1:NumericalAxis>
            </xForms1:SfChart.PrimaryAxis>
            <xForms1:SfChart.SecondaryAxis>
                <xForms1:LogarithmicAxis Minimum="{Binding YPlotMin}" Maximum="{Binding YPlotMax}">
                    <xForms1:LogarithmicAxis.Title>
                        <xForms1:ChartAxisTitle Text="Resistivity (Ohm-m)" />
                    </xForms1:LogarithmicAxis.Title>
                </xForms1:LogarithmicAxis>
            </xForms1:SfChart.SecondaryAxis>
        </xForms1:SfChart>

I set the initial plot limits in my viewmodel:

            XPlotMin = 0.0;
            XPlotMax = 1.0;
            YPlotMin = 1.0;
            YPlotMax = 1000;

Here is the rendered plot in iOS when the app starts up:

Here is the plot in Windows when the app starts up:




Attachment: iPad_screen_96de8ab6.zip

3 Replies

ST Stephen February 23, 2018 10:14 PM UTC

I found a temporary workaround. On startup I create a fake curve with StrokeWidth = 0 and the plot looks perfect on iOS. Then I realized I plan to make a list of the curves to allow users to toggle them on and off, so I don't want this fake curve to remain. So after creating the curve I removed it  with

    SeriesCollection = null;

The perfect plot did not remain in place, it reverted to the ugly plot I showed above. I am mentioning this because it might provide some hint about the problem.


ST Stephen February 23, 2018 11:53 PM UTC

I have finally solved the problem. There seems to be a bug in the LogarithmicAxis of an empty chart on iOS. If you specify minimum and maximum on an empty chart, you are specifying how many zeros you get after the "1". So Maximum="3" will give a maximum of 1000. So in the iOS screen shot above I was setting Maximum="100", which explains how I get all the zeros. Once there is a curve on the plot the limits are no longer on a logarithmic scale.

I now start my app with these limits:

            if (Device.RuntimePlatform == "iOS")
            {
                YPlotMin = 0;     // empty iOS plot uses log10 scale
                YPlotMax = 2;
            }
            else
            {
                YPlotMin = 1;
                YPlotMax = 100;
            }

And I adjust my limits after the curves are calculated.

            YPlotMin = Math.Pow(10.0, Math.Floor(Math.Log10(ymin)));
            YPlotMax = Math.Pow(10.0, Math.Ceiling(Math.Log10(ymax)));

I am only developing for UWP and iOS, so I have not checked the other platforms or a logarithmic X axis. It would be nice to know when the bug is fixed, so I can remove the platform dependent code.



DV Divya Venkatesan Syncfusion Team February 28, 2018 03:20 PM UTC

Hi Stephen,

Sorry for the inconvenience caused.

We are able to reproduce the issue at our end and we have logged a defect report. The fix for the reported issue will be available in our 2018 Volume 2 release which is expected to be rolled out in the month of May, 2018.

Regards,
Divya Venkatesan


Loader.
Up arrow icon