ChartView Ellipse wont resize on MouseEnter Event

[Devid]

I am using ChartView Telerik WPF Library. I want the points to get bigger when the user hovers over them. But for some reason it is not working as expected. The Ellipse gets bigger but it does not resize correctly. But I don't understand why. The other properties as border color and thickness are working correctly. Can someone tell me what am I missing here ?

This is how it looks currently(Look at the gif)

Here is the source code:

private FrameworkElementFactory AddPointsToSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, int colorPaletteIndex)
    {
        var seriesPredefinedColor = this.ChartBase.Palette.GlobalEntries[colorPaletteIndex].Fill;

        FrameworkElementFactory frameworkElement = new FrameworkElementFactory(typeof(Ellipse));
        frameworkElement.SetValue(Ellipse.FillProperty, ColorService.BrushFromHex(chartSeries.Key.ColorHex) ?? seriesPredefinedColor);
        frameworkElement.SetValue(Ellipse.HeightProperty, 9.0D);
        frameworkElement.SetValue(Ellipse.WidthProperty, 9.0D);


        frameworkElement.AddHandler(Ellipse.MouseEnterEvent, new MouseEventHandler((sender, args) =>
           {
               Ellipse ellipse = (Ellipse)sender;
               ellipse.Stroke = ColorService.BrushFromHex(ColorService.BlendHex((chartSeries.Key.ColorHex ?? ColorService.BrushToHex(seriesPredefinedColor)), "#000000", 0.4));

               // this is not correctly applied!
               ellipse.Width = 15;
               ellipse.Height = 15;

               ellipse.StrokeThickness = 2;
           }));

        frameworkElement.AddHandler(Ellipse.MouseLeaveEvent, new MouseEventHandler((sender, args) =>
           {
               Ellipse ellipse = (Ellipse)sender;
               ellipse.Height = 8;
               ellipse.Width  = 8;

               ellipse.Stroke = null;
           }));


        return frameworkElement;
    }

    // Here I create the Line Series and here I use the AddPointsToSeries Method
    private LineSeries CreateLineSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, ChartLegendSettings legendSettings,
                                        int colorPaletteIndex)
    {
        FrameworkElementFactory addPoints = AddPointsToSeries(chartSeries, colorPaletteIndex);
        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,
            StackGroupKey = chartSeries.Key.Group,
            CombineMode   = string.IsNullOrEmpty(chartSeries.Key.Group) ? ChartSeriesCombineMode.None :
            ChartSeriesCombineMode.Stack,

            PointTemplate = new DataTemplate()
            {
                VisualTree = addPoints,
            },
        };

        // 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;
    }

 

[Devid]

Is the question not understandable or is there no one to offer help here  ? 

[Martin Ivanov]

Hello Devid,

This behavior comes from the size caching mechanism of the chart. Basically, the control is setting the size of the visual when initially loaded and then it doesn't change it unless something on the chart's API changes. In order to achieve your requirement you can wrap the ellipse in a Grid panel and its its Width and Height properties to be the same (or little bigger) then the size of the bigger ellipse. I've prepared a small example based on this approach. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik

[Devid]

Thanks very much now it is working as expected. This small change makes the whole chart look much better