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>
An exception is thrown on Android when this code is executed
this.chart1.VerticalAxis = new NumericalAxis { Minimum = 300, Maximum = 400 };
this.chart1.VerticalAxis = new NumericalAxis { Minimum = 100, Maximum = 200 };
Hi Team,
If you set the PanOffset in XAML, it is not applied.
Does not work:
<telerikChart:RadCartesianChart x:Name="MyChart" Zoom="2, 1" PanOffset="-400,0" >
I would expect that the RadChartView renderer would be responsible for handling this after the control is loaded and the series/axis is rendered (see workaround).
If I subscribe to the ChartView's NativeControlLoaded event and wait approx 100ms before calling PanOffset, it will work.
e.g.
<telerikChart:RadCartesianChart x:Name="MyChart" Zoom="2, 1"
NativeControlLoaded="MyChart_OnNativeControlLoaded">
private async void MyChart_OnNativeControlLoaded(object sender, EventArgs e)
{
await Task.Delay(100);
MyChart.PanOffset = new Point(-400, 0);
}
The takeaway, and basis of this Bug Report, is that the control should internally perform this delay check and set the PanOffset.
This will enable MVVM scenarios because (I originally wanted to bind the PanOffset value from my view model).
Thank you,
Ramakant