shared trackball tooltip with chart templates

[Saray Arce]

Hi!

I would like to implement a shared tooltip for multiple series in my chart. I try to reproduce the solutions I found in old threads, but anything works...I guess cause I'm binding lists of values instead of attributes.

I'm using a carousel view which is filled dynamically with differents charts (I manage the DataTemplate using a control).

A snippet of my VM bindable lists ​(I get the values throught api requests):

public Datas ChartDatas { get; set; }
public List ChartValueDatas { get; set; }

public Datas ChartDatas2 { get; set; }
public List ChartValueDatas2 { get; set; }

The class ValueDatas:

 public class ValueDatas
    {
        public double Value { get; set; }
        public DateTime Date { get; set; }
    }

A snippet of my XAML ​DataTemplate:

<DataTemplate x:Key="ChartDoubleTemplate" >  (...)
    <chart:SfChart.Series>
        <chart:ColumnSeries ItemsSource="{Binding ChartValueDatas}"
                            x:Name="Xline"
                            Label="{Binding Label}"
                            XBindingPath="Date"
                            YBindingPath="Value"
                            EnableTooltip="False"
                            ShowTrackballInfo="False"
                            Color="#e95afc"
                            LegendIcon="Circle">
       </chart:ColumnSeries>
       <chart:LineSeries x:Name="serie2"
                         ItemsSource="{Binding ChartValueDatas2}"
                         Label="{Binding Label2}"
                         XBindingPath="Date"
                         YBindingPath="Value"
                         XAxis="{Binding XAxis, Source=Xline}"
                         EnableTooltip="False"
                         ShowTrackballInfo="True"
                         Color="#3366cc"
                         LegendIcon="Diamond"
                         TrackballLabelTemplate="{StaticResource trackballTemplate}" >  
     </chart:LineSeries>

And finally, a snnipet of my trackballTemplate:

<DataTemplate x:Key="trackballTemplate">
    <Frame BackgroundColor="White">
       <StackLayout Orientation="Vertical" BackgroundColor="White">
          <Label TextColor="#e95afc" >
             <Label.FormattedText>
                <FormattedString>
                  <Span Text="{ext:Translate Energy}"/> 
​
<!-- here i have the problem, I'd try to access using "x:Reference" but doesn't work -->
<!-- If I use "{Binding Value} in both, the trackball label shows the same Value​ -->
​
                  <Span Text="{Binding Source={x:Reference Xline}, Path=YBindingPath}"
                        FontAttributes="Bold" 
                        TextColor="{StaticResource TSKBlack}"/>
                </FormattedString>
             </Label.FormattedText>
         </Label>
         <LabelTextColor="#3366cc" >
             <Label.FormattedText>
                <FormattedString>
                   <Span Text="{ext:Translate Power}"/>
                     <Span Text="{Binding Value, StringFormat='{0:N2}'}"
                           FontAttributes="Bold" TextColor="Black"/>
                </FormattedString>
             </Label.FormattedText>
           </Label>
      </StackLayout>
    </Frame>
</DataTemplate>

And this is that I want to achieve it but I'm still not able to do it,but I don't know if it's possible:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/shared-x-crosshair/

Any idea or solution?

Thanks in advance!

[Devakumar Dhanapoosanam]

Hi Saray Arce, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and we would like to share the following suggestion which will be helpful for achieving your requirement.  

 

Solution 1:  

 

We can show the values as shared tooltip using the ChartTrackballBehavior LabelDisplayMode property value as GroupAllPoints. It will display label for all the data points as grouped and positioned at the top of the chart area. Please refer the code snippet below. 

 

XAML: 

<chart:SfChart.ChartBehaviors> 

    <chart:ChartTrackballBehavior LabelDisplayMode="GroupAllPoints" ShowLine="True"/> 

</chart:SfChart.ChartBehaviors> 

 

UG: https://help.syncfusion.com/xamarin/charts/trackball#label-display-mode

 

Solution 2:  

 

If you would like to use the custom template option, as you have mentioned we would like to suggest applying the same data collection for series ItemsSource with different attributes values in DataModel as in below example. 

 

public class ValueDatas 

{ 

    public double Value1 { get; set; } 

    public double Value2 { get; set; } 

    public DateTime Date { get; set; } 

} 

… 

 

 

…

<DataTemplate x:Key="trackballTemplate">

    <StackLayout>

        <Label Text="{Binding Value1}"/>

        <Label Text="{Binding Value2}"/>

    </StackLayout>

</DataTemplate>

…

 

<chart:ColumnSeries ItemsSource="{Binding ChartValueDatas }" XBindingPath="Date"

                                      YBindingPath="Value1" ShowTrackballInfo="False"/>

<chart:LineSeries ItemsSource="{Binding ChartValueDatas }" XBindingPath="Date"

                                YBindingPath="Value2"  ShowTrackballInfo="True"

              TrackballLabelTemplate="{StaticResource trackballTemplate}" />

 

Please let us know if you need any further assistance on this. 

 

Regards,
Devakumar D