We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customizing sfChart tooltip with sfBorder

Thread ID:

Created:

Updated:

Platform:

Replies:

147858 Sep 26,2019 03:43 AM UTC Oct 3,2019 10:55 AM UTC Xamarin.Forms 12
loading
Tags: SfChart
Benjamin
Asked On September 26, 2019 04:37 AM UTC

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 [Syncfusion]
Replied On September 26, 2019 09:40 AM UTC

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> 
  
Screenshot: 
 
  
Please get back to us for further assistance. 
 
Thanks,   
Muneesh Kumar G.   
 


Benjamin
Replied On September 26, 2019 10:01 AM UTC

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 [Syncfusion]
Replied On September 27, 2019 01:33 PM UTC

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> 
 
 
 
Thanks,   
Muneesh Kumar G.   
 


Benjamin
Replied On September 30, 2019 03:03 AM UTC

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 [Syncfusion]
Replied On September 30, 2019 09:44 AM UTC

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. 
 
 
 
Thanks, 
Muneesh Kumar G. 


Benjamin
Replied On October 1, 2019 03:18 AM UTC

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 [Syncfusion]
Replied On October 1, 2019 02:12 PM UTC

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> 
 
 
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. 
  
 
Thanks,  
Muneesh Kumar G. 
 


Benjamin
Replied On October 1, 2019 02:44 PM UTC

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
Replied On October 2, 2019 03:56 AM UTC

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 [Syncfusion]
Replied On October 2, 2019 12:56 PM UTC

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"> 
 
 
 
Please get back to us for further assistance. 
 
Thanks, 
Geetha R. 


Benjamin
Replied On October 3, 2019 10:03 AM UTC

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 [Syncfusion]
Replied On October 3, 2019 10:55 AM UTC

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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon