Customizing sfChart tooltip with sfBorder

[Benjamin]

How do I customize the sfChart tooltip with sfBorder, as I need the tooltip to have a shadow effect.

I am looking at doing tooltip for line series and doughnut series.

this is my current code. when I click on the doughnut series to toggle the tooltip, it is not showing up.

I am currently using the latest version 17.3.0.9-beta

i am testing my app on an iOS simulator, same as previously when the tooltip was working.

Recently there was a few updates on Xamarin.Forms side, XCode and Syncfusion. so i am not sure if either of them is causing this issue.

[Muneesh Kumar G]

Hi Benjamin, 

  

Greetings from Syncfusion.  

 

We have prepared sample based on your code snippet with updated version of Xamarin.Forms and SfChart nugets. Tooltip works fine and to avoid the Shadow problem of SfBorder, you have set padding for layout. Please refer the below code. 

  

Code snippet[C#]: 

<chart:DoughnutSeries ItemsSource="{Binding LineData1}" XBindingPath="Date" YBindingPath="Value" EnableTooltip="True"  EnableAnimation="True" AnimationDuration="2"> 

    <chart:DoughnutSeries.TooltipTemplate> 

        <DataTemplate> 

            <StackLayout Padding="10" BackgroundColor="Transparent"> 

                <border:SfBorder CornerRadius="20" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="#FFF" HasShadow="True" ShadowColor="Blue" Padding="5"> 

                    <StackLayout Orientation="Horizontal" > 

                        <Label Text="{Binding Date}" FontSize="14" /> 

                        <Label Text="{Binding Value}" FontSize="14"/> 

                    </StackLayout> 

                </border:SfBorder> 

            </StackLayout> 

        </DataTemplate> 

    </chart:DoughnutSeries.TooltipTemplate> 

</chart:DoughnutSeries> 

Sample – https://www.syncfusion.com/downloads/support/forum/147858/ze/147858-sample1484029662.zip 

  

Screenshot: 

 

  

Please get back to us for further assistance. 

 

Thanks,   

Muneesh Kumar G.   

 

[Benjamin]

Hi,

I downloaded the sample but unable to unzip it.

But I seem to have found out the issue causing tooltip to not be showing. it seems that the navigation drawer is affecting the tooltip from coming out.

how do I fix this as I need the navigation drawer and tooltip to co-exist

my code structure is as follows, the chart is residing inside the tabview:SfTabView

As i need the nav drawer and button to toggle the drawer to overlap on the tab content, thus i arrange the code like this. following the sample in the documentation would cause the drawer height to take up the whole screen.

[Muneesh Kumar G]

Hi Benjamin, 

 

We have analyzed your code and you have added both NavigationDrawer and SfChart in the same column. So, touch interactions are handled by the NavigationDrawer itself. If you want to show tooltip means, you have to place the chart as a content of NavigationDrawer. Please refer the below code. 

 

Code snippet [C#]: 

<navigationdrawer:SfNavigationDrawer InputTransparent="False" x:Name="navigationDrawer" Grid.Row="2" Margin="0, 200, 0, 0"> 

   <navigationdrawer:SfNavigationDrawer.ContentView> 

       <Grid> 

          <chart:SfChart Margin="0" ChartPadding="0" > 

          .  .  .                

   </navigationdrawer:SfNavigationDrawer.ContentView> 

</navigationdrawer:SfNavigationDrawer> 

 

 

Sample – https://www.syncfusion.com/downloads/support/forum/147858/ze/147858-sample150120818.zip 

 

Thanks,   

Muneesh Kumar G.   

 

[Benjamin]

Tried the sample. the tooltip in sample able to show. But when i tried to edit my actual code to be same as sample. tooltip is still not showing.

Code

Also is there any way to shift the whole drawer content downwards?

To look like this

[Muneesh Kumar G]

Hi Benjamin, 

 

Query 1: Tried the sample. the tooltip in sample able to show. But when i tried to edit my actual code to be same as sample. tooltip is still not showing. 

 

We have analyzed your code and you have overlaid the another view above the chart. As we said before, due to this touch interactions are not passed to chart. So, we can’t see the tooltip. If you want to place any view means, you have to position it on the left or right of chart area based on your requirement, instead of putting it above the chart.  

 

Code snippet [XAML]: 

<navigationdrawer:SfNavigationDrawer.ContentView> 

    <Grid> 

        <Grid.ColumnDefinitions> 

            <ColumnDefinition></ColumnDefinition> 

            <ColumnDefinition Width="*"></ColumnDefinition> 

        </Grid.ColumnDefinitions> 

        <tabView:SfTabView Grid.Row="0" Grid.Column="0" Margin="10"> 

            <tabView:SfTabItem Title="chart"> 

                <tabView:SfTabItem.Content> 

                    <chart:SfChart Margin="0" ChartPadding="0" > 

 

-   - 

 

                </tabView:SfTabItem.Content> 

            </tabView:SfTabItem> 

        </tabView:SfTabView> 

        <StackLayout WidthRequest="50" BackgroundColor="LightPink" Margin="0, 100, 0, 0" Grid.Row="0" Grid.Column="1"> 

            <border:SfBorder WidthRequest="50" BorderWidth="0" HorizontalOptions="Start" BackgroundColor="#007188" VerticalOptions="Start" Margin="0"> 

                <Button Text="button" WidthRequest="15" Margin="0" HorizontalOptions="End" HeightRequest="20"/> 

            </border:SfBorder> 

 

Query 2: Also, is there any way to shift the whole drawer content downwards? 

 

We have prepared sample based on your requirement and it can be downloaded from the below link. This requirement can also be achieved by setting the DrawerHeaderHeight as 0 and ContentBackgroundColor as Transparent in DrawerSettings. 

 

Sample – https://www.syncfusion.com/downloads/support/forum/147858/ze/SfNavigationDrawer_Sample-498862525.zip 

 

UG link  - https://help.syncfusion.com/xamarin/sfnavigationdrawer/multi-drawer 

 

Thanks, 

Muneesh Kumar G. 

[Benjamin]

Hi. 

Thanks for taking the time to reply and assist me.

For the reply on Query 1, I am not sure if I get u correctly, but you mean to say if I am using navigation drawer, I cannot put sfChart inside tabView?

is there a workaround for this? I would need navigation drawer and sfChart to be inside tabView

As for Query 2, I tried your suggestion but the header went missing. which is not what I wanted. I want to shift the drawer content downward so that the header of the drawer and the button that toggle the drawer would on the same line

[Muneesh Kumar G]

Hi Benjamin, 

 

Query 1:  I would need navigation drawer and sfChart to be inside tabView. 

 

You can achieve this by setting the content of SfTabView as SfNavigationDrawer with chart as per the below code snippet.  

 

Code snippet [C#]: 

<tabView:SfTabView Grid.Row="2"> 

    <tabView:SfTabItem Title="chart"> 

        <tabView:SfTabItem.Content>           

          <navigationdrawer:SfNavigationDrawer > 

            <navigationdrawer:SfNavigationDrawer.ContentView> 

                <Grid> 

                      <chart:SfChart Margin="0" ChartPadding="0" > 

 

-  - 

 

                      </chart:SfChart> 

                 </Grid> 

            </navigationdrawer:SfNavigationDrawer.ContentView> 

          </navigationdrawer:SfNavigationDrawer> 

        </tabView:SfTabItem.Content> 

    </tabView:SfTabItem> 

</tabView:SfTabView> 

 

Sample - https://www.syncfusion.com/downloads/support/forum/147858/ze/147858-sample423598247.zip 

 

Query 2: I want to shift the drawer content downward so that the header of the drawer and the button that toggle the drawer would on the same line 

 

Already solution provided for this query in below forum, please check with below forum update. 

  

https://www.syncfusion.com/forums/147748/customising-drawerheader 

 

Thanks,  

Muneesh Kumar G. 

 

[Benjamin]

Hi,

Pertaining to query 1, apology if i did not explain clearly.. but for sfchart, it does not only exist on 1 tab. If exist on multiple tabs. Based on this, is it still possible to do it from the example u given?

[Benjamin]

Hi,

I tried removing nav drawer and use StackLayout to replace nav drawer to achieve something similar. but the tooltip for the charts are still not showing

My XAML structure

[Geetha Rajendran]

Hi Benjamin, 

  

 

You can achieve this requirement by setting InputTransparent as true and CascadeInputTransparent as false for the StackLayout which is placed above the chart. Please refer the below code. 

 

Code snippet: 

<StackLayout Grid.Row="2" Margin="0, 100, 0, 0" InputTransparent="True" CascadeInputTransparent="False"> 

 

 

Sample – https://www.syncfusion.com/downloads/support/forum/147858/ze/147858-sample2113431271.zip 

 

Please get back to us for further assistance. 

 

Thanks, 

Geetha R. 

[Benjamin]

Hi,

Thanks for your assistance and patience in assisting me with my issue.i am able to fix my issue following your latest suggestions

[Muneesh Kumar G]

Hi Benjamin,  

 

Thanks for the update. 

  

We are glad to know that the given solution works. Please let us know if you need any further assistance. 

 

Thanks,  

Muneesh Kumar G.