Binding a tooltip on each bar

[Jacob]

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

[Jacob]

Hello Telerik,

I would immensely appreciate a feedback on this

thank you

[Martin Ivanov]

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