RadCartesianChart background transparent - Axes issues.

[Prasanth]

See the attached screenshots of Android & iOS using RadCartesianChart. We tried to use Xamarin Forms to have common UI consistency between the platforms. 

Can someone please identify what's causing the issue?

1. Need to have transparent background to the RadCartesian Chart so that the background gradient (Gradience created in Frame) is visible.

2. X-Axis and Y-Axis are not plotted correctly which are plotted in Android.

3. Why the same code is working differently in Android & iOS. What else customizations has to be performed to achieve same and consistent look and feel.

We are in final stages of evaluating the chart controls using Xamarin forms and this PoC which we are evaluating would lead to continuing with Telerik. Please assist.

 <telerikChart:RadCartesianChart PaletteName="Light" SelectionPaletteName="LightSelected" BackgroundColor="Transparent" HeightRequest="350" x:Name="myChart">
                    <telerikChart:RadCartesianChart.ChartBehaviors>
                        <telerikChart:ChartSelectionBehavior DataPointSelectionMode="Single" SeriesSelectionMode="Single" />
                        <telerikChart:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both"  HandleDoubleTap="True"  />
                        <telerikChart:ChartTooltipBehavior  TriggerMode="Tap"/>
                        <telerikChart:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="True" />
                    </telerikChart:RadCartesianChart.ChartBehaviors>
                    <telerikChart:RadCartesianChart.HorizontalAxis>
                        <telerikChart:DateTimeContinuousAxis GapLength="0.1" MajorStepUnit="Day" MajorStep="1"  LabelFitMode="Rotate" LabelFormat="dd MMM"  LineColor="#A9A9A9" MajorTickThickness="10" PlotMode="OnTicks" ShowLabels="True" MajorTickBackgroundColor="#A9A9A9" LabelTextColor="White"/>
                    </telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:RadCartesianChart.VerticalAxis>
                        <telerikChart:NumericalAxis LineColor="#A9A9A9" MajorTickBackgroundColor="#A9A9A9" LabelTextColor="White"/>
                    </telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:RadCartesianChart.Grid>
                        <telerikChart:CartesianChartGrid MajorLinesVisibility="X" MajorLineColor="White" MajorLineThickness="10" />
                    </telerikChart:RadCartesianChart.Grid>
                    <telerikChart:RadCartesianChart.Series>
                        <telerikChart:LineSeries CategoryBinding="MeasureDate" ValueBinding="Value" ItemsSource="{Binding SeriesData}" CombineMode="None" Stroke="White" StrokeThickness="2">
                        </telerikChart:LineSeries>
                        <!--<telerikChart:SplineSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding SecondSeriesData}" CombineMode="Stack" />-->
                    </telerikChart:RadCartesianChart.Series>
                </telerikChart:RadCartesianChart>

[Prasanth]

It seems we've figured out the issue why the background is White and not getting transparent. It is MajorLineThickness=10 which is causing the problem. But it works nice in Android.

However, we don't see HandleDoubleTap="True" of ChartPanAndZoomBehavior is not working in iOS. Any help on this?

[Didi]

Hi Prasanth,

I have tested the described scenario and I reproduced the issue on iOS. The ChartPanAndZoomBehavior.HandleDoubleTap property is not working properly on iOS when ChartTooltipBehavior.TriggerMode is set on Tap. I have logged this in our Feedback Portal and you could follow the item and track its progress on the provided link below:
https://feedback.telerik.com/Project/168/Feedback/Details/255300-chart-ios-chartpanandzoombehavior-handledoubletap-property-is-not-working-when. Please find your Telerik points updated for this report.

In order to resolve the issue with the ChartPanAndZoomBehavior.HandleDoubleTap property you could set the ChartTooltipBehavior.TriggerMode property on Hold, as follow:

<telerikChart:RadCartesianChart.ChartBehaviors>
            <telerikChart:ChartSelectionBehavior DataPointSelectionMode="Single" SeriesSelectionMode="Single"/>
            <telerikChart:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both" HandleDoubleTap="True"/>
            <telerikChart:ChartTooltipBehavior TriggerMode="Hold"/>
            <telerikChart:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="True"/>
</telerikChart:RadCartesianChart.ChartBehaviors>

Let me know if the suggested workaround works in your case.

Regards,
Didi
Progress Telerik