1. Home
  2. Forum
  3. Xamarin.Forms
  4. Styling the shared trackball tooltip (TrackballLabelDisplayMode.GroupAllPoints)

Styling the shared trackball tooltip (TrackballLabelDisplayMode.GroupAllPoints)

Hi,

I would like to implement a shared tooltip for multiple series in my chart.
I.e.: when tapping on the chart, the x value would be highlighted (blue area) and one tooltip box (red area) would be displayed containing the label and the y value for each of the series.





Is there any way to achieve this with Syncfusion sfChart?

Thanks in advance.

Best regards

6 Replies
VB Vedran Blazevic April 24, 2020 06:57 AM UTC

I just wanted to add that I have found the option:

TrackballLabelDisplayMode.GroupAllPoints

This would create one box to put all the y values in. However, if I use this, the TrackballLabelTemplate setting is completely ignored, so I cannot format the tooltip box apart from the text and background color, margins, etc (ChartTrackballLabelStyle). 


This is what I get:


As you can see it's not possible to see what number belongs to which series.

What I would like to get though is a box with the year (x_value) as header on the top and a list of seriesName - y_value pairs.

DD Devakumar Dhanapoosanam Syncfusion Team April 25, 2020 12:11 PM UTC

Hi Vedran Blazevic, 
 
Greetings from Syncfusion, 
 
We have analyzed your query “Displaying Xvalue as header on the top and a list of seriesName - y_value pairs” in the grouped Trackball labels and we would like to let you know that there is there is no direct support to add a header item for the grouped trackball labels. 
 
We would like to suggest that we can achieve your requirement using the TrackballCreated event to display the labels values based on your requirement using the ChartPointsInfo value. Please refer the below code snippet for more details, 
 
XAML: 
<chart:SfChart TrackballCreated="SfChart_TrackballCreated"> 
…. 
        <chart:SfChart.ChartBehaviors> 
            <chart:ChartTrackballBehavior LabelDisplayMode="GroupAllPoints" ShowLine="True"/> 
        </chart:SfChart.ChartBehaviors> 
</chart:SfChart> 
 
C#: 
private void SfChart_TrackballCreated(object sender, ChartTrackballCreatedEventArgs e) 
{ 
       foreach (var item in e.ChartPointsInfo) 
       { 
                …. 
                { 
                    var data = item.DataPoint as ChartDataModel; 
                    item.Label = item.Series.Label + " : " + data.YValue; 
                    if (Device.RuntimePlatform != Device.UWP) 
                        item.LabelStyle.TextColor = item.Series.Color; 
                } 
       } 
} 
 
We have prepared a sample based on your requirement and you can download the sample from below link, 
 
Screenshot: 
 
 
 
Note: Header (X value label) is added using an additional series. 
 
Please let us know whether the above solution helps to achieve your requirement or not. If you need any further assistance, please don't hesitate to contact us. 
 
Regards, 
Devakumar D 


VB Vedran Blazevic April 27, 2020 08:13 AM UTC

Hi Devakumar,

Thanks a lot. That's already very close to the intended result.

Is there any way to further style the tooltip? When using the GroupAllPoints display mode it seems that there is no way to specify something like a TrackballLabelTemplate.

e.g. I would like to have the text align to the left and the y_value to be bold.

If that's not possible, could I use a ViewAnnotation to achieve this result, i.e. instead of displaying the trackball tooltip, just update the information in a ViewAnnotation?

Thanks in advance.

DD Devakumar Dhanapoosanam Syncfusion Team April 28, 2020 03:15 PM UTC

Hi Vedran Blazevic, 
 
Thanks for the update. 
 
We have achieved your requirement by using the TrackballTemplate. We have set the Template only for the last series and hided the trackball label of first other series using the ShowTrackballInfo property which is available in series. Please refer the below code snippet, 
 
XAML: 
<DataTemplate x:Key="trackballTemplate"> 
                <Frame BackgroundColor="White"> 
                    <StackLayout Orientation="Vertical" BackgroundColor="White"> 
                        <Label TextColor="Black" > 
                            <Label.FormattedText> 
                                <FormattedString> 
                                    <Span Text="{Binding XValue}" FontAttributes="Bold"/> 
                                </FormattedString> 
                            </Label.FormattedText> 
                        </Label> 
                        <Label TextColor="Red" > 
                            <Label.FormattedText> 
                                <FormattedString> 
                                    <Span Text=" Veg : "/> 
                                    <Span Text="{Binding YValue2}" FontAttributes="Bold"/> 
                                </FormattedString> 
                            </Label.FormattedText> 
                        </Label> 
                        <Label TextColor="Green" > 
                            <Label.FormattedText> 
                                <FormattedString> 
                                    <Span Text=" Fair-trade : "/> 
                                    <Span Text="{Binding YValue1}" FontAttributes="Bold"/> 
                                </FormattedString> 
                            </Label.FormattedText> 
                        </Label> 
                        …. 
                    </StackLayout> 
                </Frame> 
</DataTemplate> 
… 
 
<chart:StackingAreaSeries x:Name="series3"  
                           ItemsSource="{Binding Data}" XBindingPath="XValue" 
                           YBindingPath="YValue2" Label="Veg" LegendIcon="SeriesType" Color="Orange"  
                           ShowTrackballInfo="True" 
                           TrackballLabelTemplate="{StaticResource trackballTemplate}" /> 
…. 
 
 
Screenshot: 
 
 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Devakumar D 


PS Pawan Shakya May 18, 2020 09:45 AM UTC

Hi Devakumar,

Can we change trackball background color which is black. As with black it makes any dark color label visibility very hard. 
Any way to apply colour change / opacity would really help ? 

SJ Suyamburaja Jayakumar Syncfusion Team May 19, 2020 07:07 AM UTC

Hi Pawan Shakya, 
 
We would like to let you know that your requirement achieved by adding the BackgroundColor to LabelStyle as per the below code snippet. 
 
C#: 
foreach (var item in e.ChartPointsInfo) 
            { 
                var data = item.DataPoint as Model;  
                item.Label = item.Series.Label + " : " + data.Value; 
                item.LabelStyle.BackgroundColor = Color.Gray; 
                . . . . 
            } 
 
 
Please let us know if you need any further assistance on this.  
  
Regards,  
Suyamburaja J. 


Loader.
Up arrow icon