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

StepAreaSeries only charts areas that span at least 6 X-axis points on UWP (but works correctly on Android)

Hello everyone,

I have recently been trying to build a slightly more complex chart with the Xamarin variant of SfChart and there is one thing that does not work correctly on UWP, but well enough on Android.

The idea is thus: There is a boolean value that changes over time (x axis) and timeframes where it is true should be colored red.
The value is encoded as 0s and 1s that are placed on a numerical y axis with Maximum="1" and Minimum="0". As a series I take a StepAreaSeries because I really just want to color the time frames.
Now on UWP it seems that this series is only capable of one step every five or so data points. On the screenshot I have plotted the same progression of values as:
- Black: LineSeries. I trust this to be correct.
- Red: StepAreaSeries. You can clearly see the problem here, hopefully. Because we have a number of charts, a kind of "grid" becomes visible, outlining the cells which can be red or white, but not a mixture.
- Cyan: StepLineSeries. You can see a similar issue here, though with occasional "zero width" spikes / drops.

I'll attach screens of UWP and Android. Note how on Android there are areas of "width 1", with the line series spiking at the same time (of half a tick before, if you will). On UWP you see the LineSeries' spikes, but no reaction on the StepAreaSeries.



I'll dump the code as well. Note that "History" is just an collection of structs containing a "DateTime Time { get }" and an "int Value { get }", more or less.

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
        <chart:SfChart BackgroundColor="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0,0,0,10" >
                <chart:DateTimeAxis Interval="1" IntervalType="Minutes" AutoScrollingDelta="120" AutoScrollingDeltaType="Minutes" x:Name="foo" >  <!--IsVisible="False"-->

                        <chart:ChartAxisLabelStyle LabelFormat="hh:mm" />


                <chart:NumericalAxis Maximum="1" Minimum="0" />

            <chart:StepAreaSeries ItemsSource="{Binding Path=History}" XBindingPath="Time" YBindingPath="Value"
                                  Color="Red" Opacity="0.5" >

            <chart:StepLineSeries ItemsSource="{Binding Path=History}" XBindingPath="Time" YBindingPath="Value" StrokeWidth="4"
                                  Color="DarkCyan" >

            <chart:LineSeries ItemsSource="{Binding Path=History}" XBindingPath="Time" YBindingPath="Value" StrokeWidth="1"
                                  Color="Black" >


Thanks for your help!

3 Replies

DA Devi Aruna Maharasi Murugan Syncfusion Team July 3, 2017 12:37 PM UTC

Hi Benjamin, 
Thanks for contacting Syncfusion Support. 
We are unable to reproduce the reported problem at our end. We have prepared a demo sample for your reference with provided information and it can be downloaded from below link, 
Sample: StepLineMin 
Please find the screenshot, 
If you are still able to reproduce the reported problem, please revert us by modifying the sample. It would be helpful for us to serve you better. 

BE Benjamin July 5, 2017 12:11 PM UTC

Hi Devi,

thanks a lot for your reply!
Based on your sample, which did indeed work for me as well, I was able to narrow the cause down further. Apparently it's got to do with having data points that are just a minute apart. (This was the case in my original data, even though the axis configuration implied something different.)

If you simply change the "AddYears" call in line 86-98 to "AddMinutes", you will see the bugged behaviour:

I've also built an extended version of your chart (source code attached) that visualizes the difference between using years and using minutes. It turns out like this:

(I made the year-spaced series to go 2 instead of 1 for better visibility.)

Best Regards,

Attachment: Page1_7fdff440.zip

DS Durgadevi Selvaraj Syncfusion Team July 6, 2017 11:14 AM UTC

Hi Benjamin, 
Sorry about the inconvenience caused. 
We have considered the reported problem as defect and have logged the defect report for this and the fix for this issue will be available in the upcoming Volume 3 main release which is estimated to be available in the end of July, 2017. 
Durga S 

Live Chat Icon For mobile
Up arrow icon