This is a migrated thread and some comments may be shown as answers.

Binding a tooltip on each bar

2 Answers 403 Views

Chart

This is a migrated thread and some comments may be shown as answers.

Jacob asked on 01 Mar 2017, 03:54 PM

tooltip.png

Hello Telerik,

I am having an issue trying to find a way to add a tooltip to each bar in a barseries control.

I have browsed different solutions for it, but none seem to work.

long story short, here is my code

<telerik:RadCartesianChart Loaded="chart_Loaded" x:Name="chart" Palette="{StaticResource ActualTargetChartPalette}" ClipToBounds="False">

<telerik:RadCartesianChart.VerticalAxis>

<telerik:CategoricalAxis IsInverse="True"

MajorTickStyle="{StaticResource TransparentTickStyle}"

LineStroke="Transparent"

LabelStyle="{StaticResource TextBlockTrendStyle}" />

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:LinearAxis ShowLabels="False" ElementBrush="Transparent" />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.Behaviors>

My attempt ---><telerik:ChartTooltipBehavior />

</telerik:RadCartesianChart.Behaviors>

<telerik:RadCartesianChart.Series>

<telerik:BarSeries CategoryBinding="ItemTypeTranslated"

ValueBinding="Actual"

ItemsSource="{Binding ReportingSummaryOrderingTrendDTO.TrendItems}"

CombineMode="None"

ShowLabels="False"

ClipToPlotArea="False" ToolTipOpening="BarSeries_ToolTipOpening"

sdk:ChartAnimationUtilities.CartesianAnimation="Rise">

<telerik:BarSeries.TooltipTemplate>

<ItemContainerTemplate>

My attempt -----> <TextBlock Text="{Binding ItemToolTip}" ></TextBlock>

</ItemContainerTemplate>

</telerik:BarSeries.TooltipTemplate>

<telerik:BarSeries.PointTemplate>

<DataTemplate>

<Rectangle Fill="{StaticResource ActualBrush}" Margin="0 0 0 3" />

</DataTemplate>

</telerik:BarSeries.PointTemplate>

<telerik:BarSeries.LegendSettings>

<telerik:SeriesLegendSettings Title="{Resx ChartLegend_Actual}" MarkerGeometry="{StaticResource SolidRectLegendGeometry}" />

</telerik:BarSeries.LegendSettings>

<telerik:BarSeries.LabelDefinitions>

<telerik:ChartSeriesLabelDefinition Binding="Actual" Format="{}{0:F1}" DefaultVisualStyle="{StaticResource TextBlockTrendStyle}" Strategy="{StaticResource RightAlignedLabelStrategy}" />

</telerik:BarSeries.LabelDefinitions>

</telerik:BarSeries>

<telerik:BarSeries CategoryBinding="ItemTypeTranslated"

ValueBinding="Target"

ItemsSource="{Binding ReportingSummaryOrderingTrendDTO.TrendItems}"

CombineMode="None"

sdk:ChartAnimationUtilities.CartesianAnimation="Rise">

<telerik:BarSeries.PointTemplate>

<DataTemplate>

<Rectangle Fill="{StaticResource TargetBrush}" Height="2" VerticalAlignment="Bottom" />

</DataTemplate>

</telerik:BarSeries.PointTemplate>

<telerik:BarSeries.LegendSettings>

<telerik:SeriesLegendSettings Title="{Resx ChartLegend_Target}" MarkerGeometry="{StaticResource LineSeriesLegendGeometry}" />

</telerik:BarSeries.LegendSettings>

</telerik:BarSeries>

</telerik:RadCartesianChart.Series>

</telerik:RadCartesianChart>

<telerik:RadLegend Grid.Column="1" Grid.Row="1" Margin="24,4,0,0" MinWidth="76" Items="{Binding LegendItems, ElementName=chart}" />

I have attached a picture showing where the tooltip should show

thank you for your time

2 Answers, 1 is accepted

answered on 06 Mar 2017, 10:16 AM

WpfApplication14.zip

Hello Jacob,

I tested your code and if you remove the TooltipTemplate the default tooltip is displayed properly. On the other hand the tooltip doesn't display when the template is set because the binding points to a property that doesn't exist in the given context. The data context of the TooltipTemplate is an object of type DataPoint. If you want to bind the tooltip to a property from your view model you can use the DataPoint's DataItem property which holds a reference to the view model. Here is an example:

<telerik:BarSeries.TooltipTemplate>

<DataTemplate>

<TextBlock Text="{Binding DataItem.ItemToolTip}"/>

</DataTemplate>

</telerik:BarSeries.TooltipTemplate>

You can also check the attached project.

Regards,
Martin
Telerik by Progress

Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.