I have two collections of int/datetime which I want to stack in an area diagram. Therefore I am using Combinemode="Stack" in my area series and on iOS this works very nice. The chart is in a tabview tab. Loading the screen is ok but the moment I click on the tab that contains the chart I get :
System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index
at System.ThrowHelper.ThrowArgumentOutOfRange_IndexException()
at Telerik.UI.Xaml.Controls.Chart.AreaRenderer.GetBottomPoints(AreaRenderContext context)
at Telerik.UI.Xaml.Controls.Chart.AreaRendererBase.AddBottomPoints(AreaRenderContext context)
at Telerik.UI.Xaml.Controls.Chart.AreaRendererBase.RenderCore()
at Telerik.UI.Xaml.Controls.Chart.C
The tab that contains my char looks like this:
<primitives:TabViewItem HeaderText="Traffic" IsSelected="{Binding Tabs[2], Mode=TwoWay}">
<primitives:TabViewItem.Content>
<StackLayout Orientation="Vertical">
<telerikChart:RadCartesianChart SelectionPaletteName="Light" x:Name="chart" VerticalOptions="FillAndExpand">
<telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:DateTimeContinuousAxis LabelFormat="dd" GapLength="0.3" PlotMode="OnTicks" MajorStepUnit="Day" MajorStep="1" />
</telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:NumericalAxis Minimum="0"/>
</telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:RadCartesianChart.Series>
<telerikChart:AreaSeries ItemsSource="{Binding CowsMilked}" DisplayName="Milked" CombineMode="Stack" Fill="LightCoral">
<telerikChart:AreaSeries.ValueBinding>
<telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
</telerikChart:AreaSeries.ValueBinding>
<telerikChart:AreaSeries.CategoryBinding>
<telerikChart:PropertyNameDataPointBinding PropertyName="Date"/>
</telerikChart:AreaSeries.CategoryBinding>
</telerikChart:AreaSeries>
<telerikChart:AreaSeries ItemsSource="{Binding CowsRejected}" DisplayName="Rejected" CombineMode="Stack" Fill="LightSkyBlue">
<telerikChart:AreaSeries.ValueBinding>
<telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
</telerikChart:AreaSeries.ValueBinding>
<telerikChart:AreaSeries.CategoryBinding>
<telerikChart:PropertyNameDataPointBinding PropertyName="Date"/>
</telerikChart:AreaSeries.CategoryBinding>
</telerikChart:AreaSeries>
</telerikChart:RadCartesianChart.Series>
</telerikChart:RadCartesianChart>
<telerikChart:RadLegend LegendProvider="{x:Reference Name=chart}"
LegendItemFontColor="Accent"
HeightRequest="60"/>
</StackLayout>
</primitives:TabViewItem.Content>
</primitives:TabViewItem>
I am binding to a List of DateTimeModels
public class DateTimeModel
{
public DateTime Date { get; set; }
public int Value { get; set; }
}
See also this thread: https://www.telerik.com/forums/stacked-area-series-on-android-gives-weird-result