Tooltip DataTemplate

[David White]

Hi, Is it possible to modify the content of the tooltip?
When hovering a chart bar, we would like to handle the OnTooltipOpening Event and insert an ItemsControl or other (grid, ListBox...) to show details of the data.

So far, I have been able to get the datapoint (related data) but the child element of the tooltip is not showing.

Is there a TooltipTemplate somewhere and I haven't seen it? Or is it called something else?
It would be better to define this template in XAML and the databinding/context on the TooltipOpening event for me.

Any suggestion?

Thanks

[Dwight]

Hello David,

It is possible to add whatever content you require in the tooltip. Please, refer to the Chart > Data Drill Down example in our QSF ( XBAP version of the QSF can be found online at http://demos.telerik.com/wpf/ )

More over, instead of creating each and every element in code (as demonstrated in the example), you can create a static resource and use it.
Here is the XAML code added to the example:

<QuickStart:Example.Resources>
    <ListBox x:Key="listBoxForTooltip" x:Shared="false" />
</QuickStart:Example.Resources>

Note the x:Shared property set to false. It guarantees that the resource can be used at multiple places.

Here is the Code-behind:

private void ChartItemToolTipOpening(ItemToolTip2D tooltip, ItemToolTipEventArgs args)
{
    ListBox list = (ListBox)this.FindResource("listBoxForTooltip");
    list.ItemsSource = args.DataSeries;
    tooltip.Content = list;
}

Let me know if you need further assistance.

Best wishes,
Evtim
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Rakhi]

Hello, I jst want my axis value on tooltip with default format (if any) applied on axis label format.

For example,

radChart1.SeriesMappings.Clear();
radChart1.DefaultView.ChartTitle.Content = "Top 10 Countries by GDP 2008 (nominal)";

radChart1.DefaultView.ChartArea.AxisY.Title = "Amount";

radChart1.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "#VAL{dd-MM-yyyy}";

radChart1.DefaultView.ChartArea.AxisY.DefaultLabelFormat = "#VAL{#,###0.0000}";

            

SeriesMapping sm = new SeriesMapping();

sm.SeriesDefinition = new BarSeriesDefinition();

sm.SeriesDefinition.ShowItemToolTips = true;

sm.SeriesDefinition.ItemToolTipFormat = "Date: #DATAITEM.VOUCH_DATE" +

                                                    Environment.NewLine + 

                                                    "Amount: #DATAITEM.TOTAL_QTY";

sm.ItemMappings.Add(new ItemMapping("TOTAL_QTY", DataPointMember.YValue));

sm.ItemMappings.Add(new ItemMapping("VOUCH_DATE", DataPointMember.XCategory));

radChart1.SeriesMappings.Add(sm);

var dt1 = (from dRow in LoadData().AsEnumerable()

                       select new

                       {

                           VOUCH_DATE = dRow["VOUCH_DATE"],

                           TOTAL_QTY = dRow["TOTAL_QTY"]

                       }

                      );

radChart1.ItemsSource = dt1;

Now, i want whatever format is set my tooltip value should be set according to that and the case may be no format is set then tooltip should show default value as in database.


Please help.

[Vladimir Milev]

Hello Rakhi,

You can override the tooltip formatting by setting the ToolTip property directly. You can do this by adding a new ItemMapping which maps a field from the data table to the DataPointMember.ItemToolTip.

Greetings,
Vladimir Milev
the Telerik team