Binding a tooltip on each bar

3 posts, 0 answers
  1. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 01 Mar Link to this post

    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. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 06 Mar Link to this post

    Hello Telerik,

    I would immensely appreciate a feedback on this

    thank you

  3. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1404 posts

    Posted 06 Mar Link to this post

    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.
Back to Top