RadCartesianChart background transparent - Axes issues.

3 posts, 0 answers
  1. Prasanth
    Prasanth avatar
    2 posts
    Member since:
    Aug 2018

    Posted 10 Aug 2018 Link to this post

    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>

  2. Prasanth
    Prasanth avatar
    2 posts
    Member since:
    Aug 2018

    Posted 10 Aug 2018 in reply to Prasanth Link to this post

    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?

  3. Didi
    Admin
    Didi avatar
    384 posts

    Posted 14 Aug 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top