Customize Default Multiple Line Series Tooltip

5 posts, 1 answers
  1. Sam
    Sam avatar
    12 posts
    Member since:
    Sep 2015

    Posted 03 Feb Link to this post

    Hi,

    I need help customizing the default trackinfo tooltip for showing multiple line series values in the same tooltip at once (or achieve a tooltip similar to the one from the 'First Look' -see attached image).

    I've been able to customize bar series tooltips in the past by doing something like the following, but using the same thing for line series doesn't show anything (it also only shows one series value at a time which isn't really what I'm trying to do):

    <telerik:RadCartesianChart.Behaviors>
         <telerik:ChartTooltipBehavior/>
    </telerik:RadCartesianChart.Behaviors>
     
     <telerik:RadCartesianChart.TooltipTemplate>
          <DataTemplate>
    <Border Background="White" BorderBrush="Black" BorderThickness="1" Padding="5" CornerRadius="3">
    <StackPanel>
    <StackPanel Orientation="Horizontal">
    <TextBlock Text="Tool Tip!"  />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
    <TextBlock Text="{Binding Label}"  />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
    <TextBlock Text="{Binding Category}"  />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
     <TextBlock Text="{Binding Value}"  />
    </StackPanel>
     </StackPanel>
    </Border>
     </DataTemplate>
     </telerik:RadCartesianChart.TooltipTemplate>

     

    I can also show the default "Category: xxxx Value: xxxx" tooltip for multiple line series at once with this:

     

    <telerik:RadCartesianChart.Behaviors>
    <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="True"/>
    </telerik:RadCartesianChart.Behaviors>

     

    Is there any way to customize the "ShowTrackInfo" tooltip? I haven't been able to reapply the first look example directly because I'm dynamically adding/removing/changing the number of series in the chart. I'm doing that like this:

     

    private void UpdateChart()
           {
               LineTrendChart.Series.Clear();
               LineTrendChart.VerticalAxis = new LinearAxis();
               LineTrendChart.HorizontalAxis = new CategoricalAxis();
     
               for (int seriesIncrementer = 0; seriesIncrementer < numberOfSeries; seriesIncrementer++)
               {
                       CategoricalSeries series1 = new LineSeries();
                       for (int i = 0; i < numberOfDataPointsToDisplay; i++)
                       {
                           series1.DataPoints.Add(new CategoricalDataPoint { Value = RawData[seriesIncrementer][i], Category = DateList[i].ToString("MM/dd") });
                       }
                       LineTrendChart.Series.Add(series1);
               }
           }

     

    My gut tells me I'm missing something very simple but I've been at this for a little while and haven't gotten anywhere .

    Thanks in advance for any help.

     


     
     
     
  2. Dinko
    Admin
    Dinko avatar
    201 posts

    Posted 08 Feb Link to this post

    Hello Samuel,

    You can change the default style of the trackball info by setting custom DataTemplate to the ChartSeries' TrackInfoTemplate property. You can take a look at the TrackBall help article where you can read more about how to set this property. For your convenience, we have prepared a sample project demonstrating this approach.

    Regards,
    Dinko
    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Sam
    Sam avatar
    12 posts
    Member since:
    Sep 2015

    Posted 28 Feb in reply to Dinko Link to this post

    Thanks for the example - I'm now able to set custom tooltips for static number of series in the chart.

    However I'm still a little confused on how to set a custom tooltip when dynamically adding series to the chart. Does this custom trackball info 'tooltip' have to be configured in the xaml? Can I create and add them in the C# at runtime?

  5. Answer
    Dinko
    Admin
    Dinko avatar
    201 posts

    Posted 02 Mar Link to this post

    Hello Sam,

    Let make one step back because in your last reply you again mentioned tooltip. Keep in mind that there is a difference between TrackBall and ToolTip. 
    - TrackBall -  The trackball is a vertical line across the chart plot area and it can display little visual indicators (circles by default) at points where the trackball line crosses the visualization of a series object.
    - ToolTip - Basically,  when you hover a data point the chart the chart visualize arbitrary information related to it.

    If you are talking about the trackball info - you can change the default visualization of the trackball both in XAML and in code. If you are using a series provider, you can add a setter for the TrackBallInfoTemplate property:
    <telerik:RadCartesianChart.SeriesProvider>
        <telerik:ChartSeriesProvider Source="{Binding YourData}">
            <telerik:ChartSeriesProvider.SeriesDescriptors>
                <telerik:CategoricalSeriesDescriptor ItemsSourcePath="YourData" ValuePath="Value" CategoryPath="Category">
                    <telerik:CategoricalSeriesDescriptor.Style>
                        <Style TargetType="telerik:BarSeries">
                            <Setter Property="TrackBallInfoTemplate" Value="{StaticResource YourCustomTemplate}"/>
                        </Style>
                    </telerik:CategoricalSeriesDescriptor.Style>
                </telerik:CategoricalSeriesDescriptor>
            </telerik:ChartSeriesProvider.SeriesDescriptors>
        </telerik:ChartSeriesProvider>
    </telerik:RadCartesianChart.SeriesProvider>

    If you are manually creating series in code, you can set the property directly:
    LineSeries series = new LineSeries();
    series.TrackBallInfoTemplate = ...

    Regards,
    Dinko
    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
  6. Sam
    Sam avatar
    12 posts
    Member since:
    Sep 2015

    Posted 02 Mar in reply to Dinko Link to this post

    Ah ok, thanks for stepping me through that! Working perfectly now.
Back to Top
UI for WPF is Visual Studio 2017 Ready