I'm working on a WPF application and using the RadChart control. I'm familiar with the ItemToolTipFormat and DataPointMember="Tooltip" features, but I wonder if the following is possible:
I've attached an image for demonstration:
Is it possible that when I hover with the mouse cursor on the x axis categories, I'll get a tooltip: For example: In the attached image, when I hover on the word May (or Sep or Nov and etc) with the mouse cursor, I will then get a tooltip.
What happens with the mentioned features above, I get a tooltip on the diagram itself, but as mentioned, I want a tooltip on the category itself on the x axis (when I hover on the months' words as displayed in the image).
Thank you in advance for your help!
That's a good question. As far as I can find you're not able to set a tooltip on those labels without using controversial implementations. I have a solution, but it's rather hacky and only supports fixed axis data. It does not support binding (I haven't found a away to pass ToolTip content through ItemMapping
elements).
The solution has 3 parts; a ResourceDictionary
, a Converter
and the RadChart
control.
The ResourceDictionary
(Named "ToolTipResources.xaml", located in the Resource folder of the same dll) contains the contents of the ToolTips:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel
x:Key="Jan">
<TextBlock
HorizontalAlignment="Left"
Text="Jan"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In January" />
</StackPanel>
<StackPanel
x:Key="Feb">
<TextBlock
HorizontalAlignment="Left"
Text="Feb"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In February" />
</StackPanel>
<StackPanel
x:Key="Mar">
<TextBlock
HorizontalAlignment="Left"
Text="Mar"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In March" />
</StackPanel>
<StackPanel
x:Key="Apr">
<TextBlock
HorizontalAlignment="Left"
Text="Apr"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In April" />
</StackPanel>
<StackPanel
x:Key="May">
<TextBlock
HorizontalAlignment="Left"
Text="May"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In May" />
</StackPanel>
<StackPanel
x:Key="Jun">
<TextBlock
HorizontalAlignment="Left"
Text="Jun"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In June" />
</StackPanel>
<StackPanel
x:Key="Jul">
<TextBlock
HorizontalAlignment="Left"
Text="Jul"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In July" />
</StackPanel>
<StackPanel
x:Key="Aug">
<TextBlock
HorizontalAlignment="Left"
Text="Aug"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In August" />
</StackPanel>
<StackPanel
x:Key="Sep">
<TextBlock
HorizontalAlignment="Left"
Text="Sep"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In September" />
</StackPanel>
<StackPanel
x:Key="Oct">
<TextBlock
HorizontalAlignment="Left"
Text="Oct"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In October" />
</StackPanel>
<StackPanel
x:Key="Nov">
<TextBlock
HorizontalAlignment="Left"
Text="Nov"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In November" />
</StackPanel>
<StackPanel
x:Key="Dec">
<TextBlock
HorizontalAlignment="Left"
Text="Dec"
FontWeight="Bold" />
<TextBlock
HorizontalAlignment="Left"
Text="In December" />
</StackPanel>
</ResourceDictionary>
The Converter
links label names with their associated ToolTip content:
/// <summary>
/// Converts chart label names into associated ToolTip content.
/// </summary>
[ValueConversion(typeof(string), typeof(object))]
public class MonthToToolTipConverter : IValueConverter
{
private static string _assemblyName;
static MonthToToolTipConverter()
{
_assemblyName = Assembly.GetExecutingAssembly().FullName;
}
/// <summary>
/// Converts a value.
/// </summary>
/// <param name="value">The value produced by the binding source.</param>
/// <param name="targetType">The type of the binding target property.</param>
/// <param name="parameter">The converter parameter to use.</param>
/// <param name="culture">The culture to use in the converter.</param>
/// <returns>A converted value. If the method returns null, the valid null value is used.</returns>
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
object result = null;
var labelName = value as string;
if (labelName != null)
{
var toolTipResourcesDictionary = new ResourceDictionary();
toolTipResourcesDictionary.Source = new Uri(String.Format("pack://application:,,,/{0};component/Resources/ToolTipResources.xaml", _assemblyName), UriKind.Absolute);
result = toolTipResourcesDictionary[labelName];
}
return result;
}
/// <summary>
/// Converts a value.
/// </summary>
/// <param name="value">The value that is produced by the binding target.</param>
/// <param name="targetType">The type to convert to.</param>
/// <param name="parameter">The converter parameter to use.</param>
/// <param name="culture">The culture to use in the converter.</param>
/// <returns>A converted value. If the method returns null, the valid null value is used.</returns>
public object ConvertBack(object value, Type targetType,
object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Addition to the RadChart
control:
<telerikCharting:ChartArea.AxisX>
<telerikCharting:AxisX>
<telerikCharting:AxisX.AxisStyles>
<telerikCharting:AxisStyles>
<telerikCharting:AxisStyles.ItemLabelStyle>
<Style
TargetType="{x:Type TextBlock}">
<Setter
Property="ToolTip"
Value="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource MonthToToolTipConverter}}" />
</Style>
</telerikCharting:AxisStyles.ItemLabelStyle>
</telerikCharting:AxisStyles>
</telerikCharting:AxisX.AxisStyles>
</telerikCharting:AxisX>
</telerikCharting:ChartArea.AxisX>
Full RadChart view (of your example from the Telerik Documentation):
<Window
x:Class="YourChartProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
xmlns:local="clr-namespace:YourChartProject"
Title="MainWindow"
Height="350"
Width="525">
<Window.Resources>
<local:MonthToToolTipConverter
x:Key="MonthToToolTipConverter" />
</Window.Resources>
<Grid>
<telerik:RadChart
VerticalAlignment="Top">
<telerik:RadChart.DefaultView>
<telerikCharting:ChartDefaultView>
<telerikCharting:ChartDefaultView.ChartTitle>
<telerikCharting:ChartTitle
Content="Year 2009"
HorizontalAlignment="Center" />
</telerikCharting:ChartDefaultView.ChartTitle>
<telerikCharting:ChartDefaultView.ChartLegend>
<telerikCharting:ChartLegend
x:Name="chartLegend"
UseAutoGeneratedItems="True" />
</telerikCharting:ChartDefaultView.ChartLegend>
<telerikCharting:ChartDefaultView.ChartArea>
<telerikCharting:ChartArea
LegendName="chartLegend">
<telerikCharting:ChartArea.AxisX>
<telerikCharting:AxisX
LayoutMode="Between"
Title="Month">
<telerikCharting:AxisX.AxisStyles>
<telerikCharting:AxisStyles>
<telerikCharting:AxisStyles.ItemLabelStyle>
<Style
TargetType="{x:Type TextBlock}">
<Setter
Property="ToolTip"
Value="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource MonthToToolTipConverter}}" />
</Style>
</telerikCharting:AxisStyles.ItemLabelStyle>
</telerikCharting:AxisStyles>
</telerikCharting:AxisX.AxisStyles>
</telerikCharting:AxisX>
</telerikCharting:ChartArea.AxisX>
<telerikCharting:ChartArea.DataSeries>
<!-- Line Chart -->
<telerikCharting:DataSeries
LegendLabel="Turnover">
<telerikCharting:DataSeries.Definition>
<telerikCharting:LineSeriesDefinition></telerikCharting:LineSeriesDefinition>
</telerikCharting:DataSeries.Definition>
<telerikCharting:DataPoint
YValue="154"
XCategory="Jan" />
<telerikCharting:DataPoint
YValue="138"
XCategory="Feb" />
<telerikCharting:DataPoint
YValue="143"
XCategory="Mar" />
<telerikCharting:DataPoint
YValue="120"
XCategory="Apr" />
<telerikCharting:DataPoint
YValue="135"
XCategory="May" />
<telerikCharting:DataPoint
YValue="125"
XCategory="Jun" />
<telerikCharting:DataPoint
YValue="179"
XCategory="Jul" />
<telerikCharting:DataPoint
YValue="170"
XCategory="Aug" />
<telerikCharting:DataPoint
YValue="198"
XCategory="Sep" />
<telerikCharting:DataPoint
YValue="187"
XCategory="Oct" />
<telerikCharting:DataPoint
YValue="193"
XCategory="Nov" />
<telerikCharting:DataPoint
YValue="176"
XCategory="Dec" />
</telerikCharting:DataSeries>
<!-- Bar Chart -->
<telerikCharting:DataSeries
LegendLabel="Expenses">
<telerikCharting:DataSeries.Definition>
<telerikCharting:BarSeriesDefinition></telerikCharting:BarSeriesDefinition>
</telerikCharting:DataSeries.Definition>
<telerikCharting:DataPoint
YValue="45"
XCategory="Jan" />
<telerikCharting:DataPoint
YValue="48"
XCategory="Feb" />
<telerikCharting:DataPoint
YValue="53"
XCategory="Mar" />
<telerikCharting:DataPoint
YValue="41"
XCategory="Apr" />
<telerikCharting:DataPoint
YValue="32"
XCategory="May" />
<telerikCharting:DataPoint
YValue="28"
XCategory="Jun" />
<telerikCharting:DataPoint
YValue="63"
XCategory="Jul" />
<telerikCharting:DataPoint
YValue="74"
XCategory="Aug" />
<telerikCharting:DataPoint
YValue="77"
XCategory="Sep" />
<telerikCharting:DataPoint
YValue="85"
XCategory="Oct" />
<telerikCharting:DataPoint
YValue="89"
XCategory="Nov" />
<telerikCharting:DataPoint
YValue="80"
XCategory="Dec" />
</telerikCharting:DataSeries>
</telerikCharting:ChartArea.DataSeries>
</telerikCharting:ChartArea>
</telerikCharting:ChartDefaultView.ChartArea>
</telerikCharting:ChartDefaultView>
</telerik:RadChart.DefaultView>
</telerik:RadChart>
</Grid>
</Window>