How to join series for hover highlight

[Evgeniia]

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]

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

[Stenly]

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

[Evgeniia]

Hello Stenly,

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