Chart ToolTip Questions

[Ian]

The Telerik Chart method for setting tooltips is somewhat different from the other tooltips I have in my app in that it seems one can't just set the information in XAML or code. Telerik charting relies on a method whereby a property on the series definition (ShowItemToolTips) is set to turn on tooltip eventing and then an event that occurs at Tooltip display time is wired up (ItemToolTipOpening)

How do I customise the appearance and display offset for a tooltip that appears for a Telerik chart item?

It seems that one can't customise the tooltip the way one can with the normal method, because when the event fires the properties on the ItemToolTip2D object passed into the event are nearly all read only. The only properties that can be set are InnerBorderBrush and OuterBorderBrush.

The main problem is that Telerik chart tooltips get severely truncated for the rightmost chart items because there is hardly any horizontal canvas space available to display the tooltip.

How can I change the offset for these tooltips so that text doesn't become complete inaccessible? and How can I get Telerik tooltips to have the more polished look and feel that my other tooltips have? (ie ability to specify whatever I like in a Content element)?

Thanks,
Ian

[Giuseppe]

Hello Ian,

Onto your questions:

• You can customize the appearance of the tooltip either via the ItemToolTip2D instance passed on ItemToolTipOpening event or you can swap the control template altogether by passing a new style to the respective SeriesDefinition.SeriesItemTooltipStyle property (if you need more general modification). We have attached a sample application that demonstrates how you can customize the tooltip padding by modifying the default control template -- here is also a code snippet:

XAML

<Style x:Name="CustomTooltipStyle" TargetType="telerikCharting:ItemToolTip2D" >
    <Setter Property="OuterBorderBrush" Value="#FF767676" />
    <Setter Property="InnerBorderBrush" Value="#FFFFFFFF" />
    <Setter Property="Foreground" Value="#FF666666" />
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                <GradientStop Color="#FFE4E5F0" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderOpacity" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerikCharting:ItemToolTip2D">
                <Border x:Name="ToolTipBorder"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="3"
                    BorderBrush="{TemplateBinding OuterBorderBrush}"
                    Opacity="{TemplateBinding BorderOpacity}">
                    <telerikCharting:ClipPanel>
                        <Border
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="2"
                            BorderBrush="{TemplateBinding InnerBorderBrush}"
                            Background="{TemplateBinding Background}">
                            <ContentControl Padding="10" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" />
                        </Border>
                    </telerikCharting:ClipPanel>
                    <Border.Triggers>
                        <EventTrigger RoutedEvent="Border.Loaded">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.6" Storyboard.TargetName="ToolTipBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.6" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Border.Triggers>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

C#

RadChart1.DefaultSeriesDefinition.ShowItemToolTips = true;
RadChart1.DefaultSeriesDefinition.SeriesItemTooltipStyle = this.CustomTooltipStyle;

RadChart1.ItemsSource = new[] {20, 50, 89, 11, 40};

• You can specify any content you want for the tooltip in the ItemTooltipOpening event by setting the ItemTooltip2D.Content property like this (the attached sample application demonstrates this approach as well):

C#

private void ChartArea_ItemToolTipOpening(ItemToolTip2D tooltip, ItemToolTipEventArgs e)
{
    RadChart chart = new RadChart();
    chart.Height = 200;
    chart.Width = 300;
    chart.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed;
    chart.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Inside;
    chart.DefaultSeriesDefinition = new LineSeriesDefinition();
    chart.ItemsSource = new[] {11, 5, 7, 21};

    tooltip.Content = chart;
}

• Unfortunately it is not possible to customize the display offset for the rightmost items with the current version of the control -- we will consider improving this behavior for one of the future releases of the charting product as indeed there are scenarios when the tooltip content is inaccessible.

Sincerely yours,
Manuel
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.

[Ian]

Thanks for this. 

The positioning change to the tooltip is essential for chart series that are narrow as it is impossible to have a tooltip display anything meaningful given the extremely narrow width available for data series that are on the extreme right of a chart. I hope this makes it into a future release.

Regards,
Ian