ChartView Custom TooltipTempate in code behind

[Devid]

The ChartView ToolTip should look like the on in the attached gif.

I figured out that I have to change the TooltipTemplate.

But how can I get the LineSeries X values and Y Values ? In my Source code instead of X and Y I should see in the ToolTip the X value (example: January) and Y Value (example: 2,00). Any ideas ?

Here is my unfinished Source Code: 

private LineSeries CreateLineSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, ChartLegendSettings legendSettings,
                                           int colorPaletteIndex)
       {
           // TODO: tooltip work in progress, show Format in Tooltips
           FrameworkElementFactory tooltipFramework = new FrameworkElementFactory(typeof(Border));
           tooltipFramework.SetValue(Border.BackgroundProperty, new SolidColorBrush(Colors.DimGray));
           tooltipFramework.SetValue(Border.PaddingProperty, new Thickness(5));

           FrameworkElementFactory tooltipStackpanelOne = new FrameworkElementFactory(typeof(StackPanel)) { Name = "tooltipStackpanelOne" };
           tooltipStackpanelOne.SetValue(StackPanel.OrientationProperty, Orientation.Vertical);
           tooltipFramework.AppendChild(tooltipStackpanelOne);

           FrameworkElementFactory textBlockOne = new FrameworkElementFactory(typeof(TextBlock));
           textBlockOne.SetValue(TextBlock.TextProperty, "X");
           textBlockOne.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.White));
           textBlockOne.SetValue(TextBlock.FontWeightProperty, FontWeights.DemiBold);

           FrameworkElementFactory textBlockTwo = new FrameworkElementFactory(typeof(TextBlock));
           textBlockTwo.SetValue(TextBlock.TextProperty, "Y");
           textBlockTwo.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.White));
           textBlockTwo.SetValue(TextBlock.FontWeightProperty, FontWeights.DemiBold);

           tooltipStackpanelOne.AppendChild(textBlockOne);
           tooltipStackpanelOne.AppendChild(textBlockTwo);

           var lineSerie = new LineSeries()
           {
               VerticalAxis    = CreateMultipleVerticalAxis(chartSeries, colorPaletteIndex, out var multipleVerticalAxis) ? multipleVerticalAxis : null,
               ZIndex          = 150, // the line series should always be displayed on top of other series.
               StrokeThickness = 3.5,
               LegendSettings  = (SeriesLegendSettings)legendSettings,
               Opacity         = 0.8,
               //SeriesAnimation = new ChartRevealAnimation()
               //{
               //    AnimationDirection = AnimationDirection.In,
               //    Orientation        = Orientation.Horizontal,
               //    Duration           = new TimeSpan(0, 0, 0, 1, 500),
               //    Delay              = new TimeSpan(0, 0, 0, 0, 555),
               //},
               //PointAnimation = new ChartMoveAnimation()
               //{
               //    MoveAnimationType = MoveAnimationType.Left,
               //    Duration          = new TimeSpan(0, 0, 0, 0, 400),
               //    Delay             = new TimeSpan(0, 0, 0, 0, 155),
               //},
               StackGroupKey = chartSeries.Key.Group,
               CombineMode   = string.IsNullOrEmpty(chartSeries.Key.Group) ? ChartSeriesCombineMode.None : ChartSeriesCombineMode.Stack,
               PointTemplate = new DataTemplate()
               {
                   VisualTree = AddPointsToSeries(chartSeries, colorPaletteIndex),
               },
               LabelDefinitions =
               {
                   // set the clarion format for the labels
                   new ChartSeriesLabelDefinition()
                   {
                       Template = new DataTemplate()
                       {
                           VisualTree = GetSeriesFormat(chartSeries),
                       }
                   }
               },
               TooltipTemplate = new DataTemplate()
               {
                   VisualTree = tooltipFramework,
               }
           };

           //// this is the old way of adding point to the LineSeries
           //string pointTemplateString =
           //    @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">" +
           //    @"<Ellipse Fill=""Black"" Width=""5"" Height=""5"" /></DataTemplate>";
           //lineSerie.PointTemplate = (DataTemplate)XamlReader.Parse(pointTemplateString);

           // this is the color of line series
           if (chartSeries.Key.ColorHex != null)
           {
               lineSerie.Stroke = (SolidColorBrush)(new BrushConverter().ConvertFrom(chartSeries.Key.ColorHex));
           }

           foreach (ChartDataPoint serie in chartSeries.Value)
           {
               lineSerie.DataPoints.Add(new CategoricalDataPoint()
               {
                   Category = serie.XPoint.Label,
                   Value    = (double?)serie.Value,
               });
           }

           return lineSerie;
       }

[Dinko | Tech Support Engineer]

Hi Devid,

Thank you for the provided code snippet.

To show the current X and Y value of the hovered data point you can set the binding of the FrameworkElementFactory TextBlocks. Basically, the DataContext of the ToolTip is a CategoricalDataPoint when you are using categorical series. The CategoricalDataPoint expose Category and Value properties. You can bind directly to them. Check the following code snippet.

private LineSeries CreateLineSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, ChartLegendSettings legendSettings,int colorPaletteIndex)
{
   // TODO: tooltip work in progress, show Format in Tooltips
   FrameworkElementFactory tooltipFramework = new FrameworkElementFactory(typeof(Border));
   tooltipFramework.SetValue(Border.BackgroundProperty, new SolidColorBrush(Colors.DimGray));
   tooltipFramework.SetValue(Border.PaddingProperty, new Thickness(5));

   FrameworkElementFactory tooltipStackpanelOne = new FrameworkElementFactory(typeof(StackPanel)) { Name = "tooltipStackpanelOne" };
   tooltipStackpanelOne.SetValue(StackPanel.OrientationProperty, Orientation.Vertical);
   tooltipFramework.AppendChild(tooltipStackpanelOne);

   FrameworkElementFactory textBlockOne = new FrameworkElementFactory(typeof(TextBlock));
  // textBlockOne.SetValue(TextBlock.TextProperty, "X"); REMOVE IT
   textBlockOne.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.White));
   textBlockOne.SetValue(TextBlock.FontWeightProperty, FontWeights.DemiBold);

   Binding yValueBinding = new Binding("Value");
   textBlockOne.SetBinding(TextBlock.TextProperty, yValueBinding);

   FrameworkElementFactory textBlockTwo = new FrameworkElementFactory(typeof(TextBlock));
   //textBlockTwo.SetValue(TextBlock.TextProperty, "Y"); REMOVE IT
   textBlockTwo.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.White));
   textBlockTwo.SetValue(TextBlock.FontWeightProperty, FontWeights.DemiBold);

   Binding xValueBinding = new Binding("Category");
   textBlockTwo.SetBinding(TextBlock.TextProperty, xValueBinding);

   tooltipStackpanelOne.AppendChild(textBlockOne);
   tooltipStackpanelOne.AppendChild(textBlockTwo);

   var lineSerie = new LineSeries()
   {
       VerticalAxis    = CreateMultipleVerticalAxis(chartSeries, colorPaletteIndex, out var multipleVerticalAxis) ? multipleVerticalAxis : null,
       ZIndex          = 150, // the line series should always be displayed on top of other series.
       StrokeThickness = 3.5,
       LegendSettings  = (SeriesLegendSettings)legendSettings,
       Opacity         = 0.8,
       //SeriesAnimation = new ChartRevealAnimation()
       //{
       //    AnimationDirection = AnimationDirection.In,
       //    Orientation        = Orientation.Horizontal,
       //    Duration           = new TimeSpan(0, 0, 0, 1, 500),
       //    Delay              = new TimeSpan(0, 0, 0, 0, 555),
       //},
       //PointAnimation = new ChartMoveAnimation()
       //{
       //    MoveAnimationType = MoveAnimationType.Left,
       //    Duration          = new TimeSpan(0, 0, 0, 0, 400),
       //    Delay             = new TimeSpan(0, 0, 0, 0, 155),
       //},
       StackGroupKey = chartSeries.Key.Group,
       CombineMode   = string.IsNullOrEmpty(chartSeries.Key.Group) ? ChartSeriesCombineMode.None : ChartSeriesCombineMode.Stack,
       PointTemplate = new DataTemplate()
       {
           VisualTree = AddPointsToSeries(chartSeries, colorPaletteIndex),
       },
       LabelDefinitions =
       {
           // set the clarion format for the labels
           new ChartSeriesLabelDefinition()
           {
               Template = new DataTemplate()
               {
                   VisualTree = GetSeriesFormat(chartSeries),
               }
           }
       },
       TooltipTemplate = new DataTemplate()
       {
           VisualTree = tooltipFramework,
       }
   };

   //// this is the old way of adding point to the LineSeries
   //string pointTemplateString =
   //    @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">" +
   //    @"<Ellipse Fill=""Black"" Width=""5"" Height=""5"" /></DataTemplate>";
   //lineSerie.PointTemplate = (DataTemplate)XamlReader.Parse(pointTemplateString);

   // this is the color of line series
   if (chartSeries.Key.ColorHex != null)
   {
       lineSerie.Stroke = (SolidColorBrush)(new BrushConverter().ConvertFrom(chartSeries.Key.ColorHex));
   }

   foreach (ChartDataPoint serie in chartSeries.Value)
   {
       lineSerie.DataPoints.Add(new CategoricalDataPoint()
       {
           Category = serie.XPoint.Label,
           Value    = (double?)serie.Value,
       });
   }

   return lineSerie;
}

Regards,
Dinko
Progress Telerik

[Devid]

Thanks, now it works perfectly.

Two more questions regarding the ToolTips:

• How can I show also the Bubble size when I have a bubble series ?
• Is it possible to set the tooltip to popup when I am close to the point ? Now it only popups when I am exactly pointing on the point, but I would like it to also popup when I am close to it.

[Dinko | Tech Support Engineer]

Hi Devid,

To add the bubble size to the ToolTip you can add additional TextBlock to the FrameworkElementFactory (StackPanel) and bind to the BubbleSize property. Add the following code snippet to your code.

FrameworkElementFactory textBlockThree = new FrameworkElementFactory(typeof(TextBlock));
textBlockThree.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.White));
textBlockThree.SetValue(TextBlock.FontWeightProperty, FontWeights.DemiBold);

Binding bubbleSizeBinding = new Binding("BubbleSize");
textBlockThree.SetBinding(TextBlock.TextProperty, bubbleSizeBinding);

Regarding your second question. The chart does not provide a functionality to increase the hittest area. What you can do is to place bigger UI element on top of the point and set its background to transparent. For example, you can set a custom template for the PointTemplate property of the LineSeries. In the custom template, you can add a Grid and place two Ellipse inside one on another. The top one will have Fill set to Transparent and have bigger Width and Height.

<telerik:LineSeries.PointTemplate>
    <DataTemplate>
        <Grid>
            <Ellipse  Fill="Blue" Width="20" Height="20"/>
            <Ellipse Fill="Transparent" Width="60" Height="60" />
        </Grid>
    </DataTemplate>
</telerik:LineSeries.PointTemplate>

Regards,
Dinko
Progress Telerik