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.
UWP:
Android:
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"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="[...]"
xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms">
<ContentView.Content>
<chart:SfChart BackgroundColor="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0,0,0,10" >
<chart:SfChart.PrimaryAxis>
<chart:DateTimeAxis Interval="1" IntervalType="Minutes" AutoScrollingDelta="120" AutoScrollingDeltaType="Minutes" x:Name="foo" > <!--IsVisible="False"-->
<chart:DateTimeAxis.LabelStyle>
<chart:ChartAxisLabelStyle LabelFormat="hh:mm" />
</chart:DateTimeAxis.LabelStyle>
</chart:DateTimeAxis>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis Maximum="1" Minimum="0" />
</chart:SfChart.SecondaryAxis>
<chart:StepAreaSeries ItemsSource="{Binding Path=History}" XBindingPath="Time" YBindingPath="Value"
Color="Red" Opacity="0.5" >
</chart:StepAreaSeries>
<chart:StepLineSeries ItemsSource="{Binding Path=History}" XBindingPath="Time" YBindingPath="Value" StrokeWidth="4"
Color="DarkCyan" >
</chart:StepLineSeries>
<chart:LineSeries ItemsSource="{Binding Path=History}" XBindingPath="Time" YBindingPath="Value" StrokeWidth="1"
Color="Black" >
</chart:LineSeries>
</chart:SfChart>
</ContentView.Content>
</ContentView>
Thanks for your help!
