Search code examples
wpftelerikradchart

RadChart - ToolTip for X axis itself - Telerik


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:

enter image description here

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!


Solution

  • 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>