X-Axis labels are overlapped when new data points are constantly added.
on Android, the axis labels are replaced.
There is an inconsistency in the behavior on Android and iOS.
Workaround:
apply ChartPanAndZoomBehavior and set
PanMode to "Horizontal"
ZoomMode to "Horizontal"
And chart Zoom to "2,1"
<telerikChart:RadCartesianChart PaletteName="Light"
Zoom="2, 1">
<telerikChart:RadCartesianChart.BindingContext>
<local:ViewModel/>
</telerikChart:RadCartesianChart.BindingContext>
<telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:DateTimeContinuousAxis LabelFitMode="Rotate"
MajorStepUnit="Day"
PlotMode="OnTicks"
LabelFormat="dd MMM"
MajorStep="20"
ShowLabels="True"/>
</telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:NumericalAxis />
</telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:RadCartesianChart.Series>
<telerikChart:LineSeries ValueBinding="Value"
CategoryBinding="Date"
DisplayName="Sales"
ItemsSource="{Binding Data}"/>
</telerikChart:RadCartesianChart.Series>
<telerikChart:RadCartesianChart.ChartBehaviors>
<telerikChart:ChartPanAndZoomBehavior ZoomMode="Horizontal"
PanMode="Horizontal"
HandleDoubleTap="True"/>
</telerikChart:RadCartesianChart.ChartBehaviors>
</telerikChart:RadCartesianChart>
When rendering null values, there is inconsistency between the platforms. On Android and on iOS gap is displayed, on UWP the lines are connected:
Android:
UWP:
Bar series disappear when applying zoom and then pan
The behavior can be reproduced in a horizontal bar series:
The vertical axis is categorical, and the horizontal axis is numerical
<telerik:RadCartesianChart.ChartBehaviors>
<telerik:ChartPanAndZoomBehavior PanMode="Vertical"
ZoomMode="Both" />
</telerik:RadCartesianChart.ChartBehaviors>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:CategoricalAxis />
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:NumericalAxis Minimum="0"
ShowLabels="True"
LabelFormat="N0">
</telerik:NumericalAxis>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.Series>
<telerik:BarSeries CategoryBinding="Category"
ValueBinding="Value"
ItemsSource="{Binding Data}" />
</telerik:RadCartesianChart.Series>
Workaround:
Replace the axis:
Use categorical axis for the horizontal axis and numerical axis for the vertical axis
Annotation (Grid line ) for the DateTimeContinuousAxis is not visualized on iOS. It works as expected on Android.
Add grid line annotation for the datetime axes. the grid lines are not visualized on iOS.
<telerikChart:RadCartesianChart x:Name="chart">
<telerikChart:RadCartesianChart.BindingContext>
<local:ViewModel />
</telerikChart:RadCartesianChart.BindingContext>
<telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:DateTimeContinuousAxis LabelFitMode="Rotate"
x:Name="horizontal"/>
</telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:NumericalAxis />
</telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:RadCartesianChart.Series>
<telerikChart:SplineSeries ValueBinding="Value"
CategoryBinding="Date"
ItemsSource="{Binding Data}"
ShowLabels="True"
/>
</telerikChart:RadCartesianChart.Series>
<telerikChart:RadCartesianChart.Annotations>
<telerikChart:CartesianGridLineAnnotation Stroke="#0E72F6"
StrokeThickness="2"
Value="{Binding Threshold}"
Axis="{x:Reference horizontal}">
<telerikChart:CartesianGridLineAnnotation.DashArray>
<x:Array Type="{x:Type x:Double}">
<x:Double>4.0</x:Double>
<x:Double>2.0</x:Double>
</x:Array>
</telerikChart:CartesianGridLineAnnotation.DashArray>
</telerikChart:CartesianGridLineAnnotation>
</telerikChart:RadCartesianChart.Annotations>
</telerikChart:RadCartesianChart>