Telerik blogs

Every now and then we receive requests / inquiries which wordings may vary, but basically all come down to the same thing – my chart space is limited, how to optimize the content of the ChartArea so my data does not look so squashed?

One possible solution that works in some scenarios is to hide the legend altogether. Today we will propose another option for those of you who are looking for a less “radical” remedy – display the ChartLegend as a ToolTip on demand. Actually, this is quite easy to achieve with the ToolTipService class provided by WPF / Silverlight.

Here are the necessary steps:

  • First we still need to collapse the default ChartLegend (part of the RadChart.DefaultView) as we will be using another instance to display in the tooltip.
  • Now we need to initialize the ToolTipService.ToolTip attached property with the new ChartLegend instance that will be used in the tooltip.
  • The final step is to associate the newly created ChartLegend with the ChartArea from the default view (so the chart is able to fill the legend items automatically) – this is achieved by setting the ChartArea.LegendName property (or ChartArea.Legend in code-behind) to the identifier of the custom legend.

 

<telerik:RadChart x:Name="RadChart1">
   
<telerik:RadChart.DefaultView>
       
<chart:ChartDefaultView>
           
<chart:ChartDefaultView.ChartLegend>
               
<chart:ChartLegend Visibility="Collapsed" />
            </
chart:ChartDefaultView.ChartLegend>
           
<chart:ChartDefaultView.ChartArea>
               
<chart:ChartArea LegendName="TooltipLegend" />
            </
chart:ChartDefaultView.ChartArea>
       
</chart:ChartDefaultView>
   
</telerik:RadChart.DefaultView>
   
<ToolTipService.ToolTip>
       
<ToolTip Background="Black" Style="{StaticResource CustomToolTipStyle}">
           
<ToolTip.Content>
               
<chart:ChartLegend x:Name="TooltipLegend" Background="Black" Height="200" Width="150" />
            </
ToolTip.Content>
       
</ToolTip>
   
</ToolTipService.ToolTip>
</telerik:RadChart>

 

That’s basically everything needed to achieve the desired functionality!

We will only tweak the default tooltip template to add some nice rounded corners like this:

<Window x:Class="WpfApplication1.Window1"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik
="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:chart
="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
    Title
="Window1">
   
<Grid x:Name="LayoutRoot" Background="White">
       
<Grid.Resources>
           
<Style x:Key="CustomToolTipStyle" TargetType="ToolTip">
                <Setter Property
="Template">
                    <Setter
.Value>
                        <ControlTemplate TargetType
="ToolTip">
                            <Border x
:Name="Root" CornerRadius="10" 
                                    BorderThickness
="{TemplateBinding BorderThickness}
                                    Background
="#FFFFFFFF" 
                                    BorderBrush
="{TemplateBinding BorderBrush}">
                                <Border BorderBrush
="#FFFFFFFF" 
                                        BorderThickness
="1" 
                                        CornerRadius
="8" 
                                        Background
="{TemplateBinding Background}
                                        Padding
="{TemplateBinding Padding}">
                                    <Border
.Resources>
                                        <Storyboard x
:Key="Visible State" />
                                        <Storyboard x
:Key="Normal State" />
                                    <
/Border.Resources>
                                    <ContentPresenter Content
="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}
                                                      Cursor
="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" />
                                <
/Border>
                            <
/Border>
                        <
/ControlTemplate>
                    <
/Setter.Value>
                <
/Setter>
            </
Style>
       
</Grid.Resources>

       
<telerik:RadChart x:Name="RadChart1">
           
<telerik:RadChart.DefaultView>
               
<chart:ChartDefaultView>
                   
<chart:ChartDefaultView.ChartLegend>
                       
<chart:ChartLegend Visibility="Collapsed" />
                    </
chart:ChartDefaultView.ChartLegend>
                   
<chart:ChartDefaultView.ChartArea>
                       
<chart:ChartArea LegendName="TooltipLegend" />
                    </
chart:ChartDefaultView.ChartArea>
               
</chart:ChartDefaultView>
           
</telerik:RadChart.DefaultView>
           
<ToolTipService.ToolTip>
               
<ToolTip Background="Black" Style="{StaticResource CustomToolTipStyle}">
                   
<ToolTip.Content>
                       
<chart:ChartLegend x:Name="TooltipLegend" Background="Black" Height="200" Width="150" />
                    </
ToolTip.Content>
               
</ToolTip>
           
</ToolTipService.ToolTip>
       
</telerik:RadChart>

   
</Grid>
</Window>

 

Here is the final result after the chart is filled with some data in code behind:

chart-tooltip-legend.


Comments

Comments are disabled in preview mode.