WPF / Silverlight: RadChart with ChartLegend as a ToolTip

by XAML Team | Comments 2

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.

2 Comments

Josef Rogovsky
nice!
Andre
Very cool, but I can't seem to replicate this behaviour when I do this in the code-behind. I just want to separate the legend from the chart to begin with:

var stackPanel = new StackPanel {OrientationOrientation = Orientation.Horizontal}; 
var legendName = "MyLabel";  
var chartLegend = new ChartLegend { Name = legendName };  
var radChart = new RadChart();  
  
radChart.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;  
radChart.DefaultView.ChartArea.LegendName = legendName;  
  
stackPanel.Children.Add(radChart);  
stackPanel.Children.Add(chartLegend); 

var stackPanel = new StackPanel
{
    Orientation = Orientation.Horizontal
};

var legendName = "MyLabel";

var chartLegend = new ChartLegend();
var radChart = new RadChart();

radChart.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;
radChart.DefaultView.ChartArea.LegendName = legendName;

stackPanel.Children.Add(radChart);
stackPanel.Children.Add(chartLegend);
var stackPanel = new StackPanel
{
    Orientation = Orientation.Horizontal
};

var legendName = "MyLabel";

var chartLegend = new ChartLegend();
var radChart = new RadChart();

radChart.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;
radChart.DefaultView.ChartArea.LegendName = legendName;

stackPanel.Children.Add(radChart);
stackPanel.Children.Add(chartLegend);
What am I missing here?
var stackPanel = new StackPanel
{
    Orientation = Orientation.Horizontal
};

var legendName = "MyLabel";

var chartLegend = new ChartLegend();
var radChart = new RadChart();

radChart.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;
radChart.DefaultView.ChartArea.LegendName = legendName;

stackPanel.Children.Add(radChart);
stackPanel.Children.Add(chartLegend);
var stackPanel = new StackPanel
{
    Orientation = Orientation.Horizontal
};

var legendName = "MyLabel";

var chartLegend = new ChartLegend();
var radChart = new RadChart();

radChart.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;
radChart.DefaultView.ChartArea.LegendName = legendName;

stackPanel.Children.Add(radChart);
stackPanel.Children.Add(chartLegend);

Comments

  1.    
     
    		 
    		  
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by XAML Team - or - read latest articles in Developer Tools
Bloggers Archive Tags