How to join series for hover highlight

1 Answer 15 Views
ChartView
Evgeniia
Top achievements
Rank 1
Evgeniia asked on 17 Jan 2022, 02:07 PM

I have a data set that I use to create series and for each item from this set I've got 2 series: points plotted with ScatterPointSeries and line plotted with ScatterLineSeries. But both belongs to one item and I would like to highlight both of them when I hover over either first series or second one.

Is it possible to join two series? Or change hovering behavior?

Stenly
Telerik team
commented on 20 Jan 2022, 01:59 PM

I will review this and see if I can come up with a solution.

1 Answer, 1 is accepted

Sort by
0
Accepted
Stenly
Telerik team
answered on 20 Jan 2022, 02:42 PM

Hello Evgeniia,

Currently, the RadChartView control does not support this behavior out of the box. However, one way of achieving the wanted result would be to set a Style with TargetType="Path" to the DefaultVisualStyle property of the ScatterLineSeries. Then, you could customize the visual representation of the Path elements present inside the series, by setting its properties (Width, Height, Fill, etc). In addition, the HoverMode property of the RadCartesianChart control could be utilized (with its value set to FadeOtherSeries), which will fade every series that are not hovered by the mouse.

The following code snippet shows this approach's implementation:

<telerik:RadCartesianChart x:Name="chart" HoverMode="FadeOtherSeries">
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.Series>
        <telerik:ScatterLineSeries x:Name="anotherScatterLineSeries" XValueBinding="XValue" YValueBinding="YValue" ItemsSource="{Binding AnotherSeriesData}">
        </telerik:ScatterLineSeries>
        <telerik:ScatterLineSeries x:Name="scatterLineSeries" XValueBinding="XValue" YValueBinding="YValue" ItemsSource="{Binding Data}">
            <telerik:ScatterLineSeries.DefaultVisualStyle>
                <Style TargetType="Path">
                    <Setter Property="Width" Value="10" />
                    <Setter Property="Height" Value="10" />
                    <Setter Property="Fill" Value="Red" />
                </Style>
            </telerik:ScatterLineSeries.DefaultVisualStyle>
        </telerik:ScatterLineSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

The result from implementing this approach is as follows:

Following this approach would prevent the need of using additional series (ScatterPointSeries) to visualize points onto the ScatterLineSeries instance.

Alternatively, if the above approach is undesired, you could manually set the Tag property on the series that you want to join, and they could be retrieved inside, for example, the MouseOver event of the RadCartesianChart element. 

<telerik:RadCartesianChart.Series>
    <telerik:ScatterPointSeries x:Name="scatterPointSeries" XValueBinding="XValue" YValueBinding="YValue" ItemsSource="{Binding Data}" Tag="GroupA" />
    <telerik:ScatterLineSeries x:Name="scatterLineSeries" XValueBinding="XValue" YValueBinding="YValue" ItemsSource="{Binding Data}" Tag="GroupA" />                
</telerik:RadCartesianChart.Series>
private void chart_MouseMove(object sender, MouseEventArgs e)
{
    //Sample implementation which sets the Opacity property of the joined series
    var hoveredSeries = (ScatterPointSeries)this.chart.Series.FirstOrDefault(x => x.IsMouseOver);

    foreach (var series in this.chart.Series)
    {
        series.Opacity = 1;
    }

    if (hoveredSeries != null)
    {
        var matchingSeries = (ScatterPointSeries)this.chart.Series.FirstOrDefault(x => x != hoveredSeries && x.Tag != null && x.Tag.Equals(hoveredSeries.Tag));
        if (matchingSeries != null)
        {   
            matchingSeries.Opacity = 0.4;
        }
        hoveredSeries.Opacity = 0.4;
    }
}

This implementation of the MouseOver event could be further customized to meet your project's requirements.

With that said, could you give these suggestions a try and let me know how it goes?

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Evgeniia
Top achievements
Rank 1
commented on 20 Jan 2022, 02:49 PM

Hello Stenly,

Thank you for the answer. Yes, custom MouseOver behavior works for me!

Tags
ChartView
Asked by
Evgeniia
Top achievements
Rank 1
Answers by
Stenly
Telerik team
Share this question
or