Make Unselected Series semi-transparent when SelectSeries is called?

[Brett]

I have several StepLine Series that I am displaying on a RadChart.  when I mouse over them  (HoverScope = InteractivityScope.Series) I get a nice effect where the hovered series is bolded and the others fade out somewhat.

what I would like to do is duplicate this effect without using a mouse.  the SelectSeries function is available, but it only bolds the selected series.  is there a way that I can also fade out the others?

[Petar Kirov]

Hi Brett,

The RadChart does not support this functionality out-of-the-box, however you can implement it relatively easy. Here is one possible solution: 

this.chart.DefaultView.ChartArea.SelectSeries(0);
for (int i = 1; i < this.chart.SeriesMappings.Count; i++)
{
    this.chart.SeriesMappings[i].SeriesDefinition.Appearance.Fill.Opacity = 0.2;
}

In the above example the 0-th element is selected and the others are faded-out.

If you have any further questions feel free to ask.
 
Regards,
Petar Kirov
the Telerik team

[Brett]

Thanks for the Feedback Petar.  I've just had a chance to test this (this isn't a HUGE priority, hence the delay)

when I try to apply your code it fails, as .Fill==null.  I'm creating this Chart programatically.  in the creation routine a went ahead and gave .Fill a value.  this removes the error, but oddly the fill on the chart is still all default colors.  and I still don't get my faded lines.

any thoughts?

[Petar Kirov]

Hi Brett,

Let me start with my apologies for the late reply.

It seams that the code-snippet I provided in my previous post was taken from larger project, and that's why it wasn't correct. So let me clear up some things:

• The SeriesDefinition.Appearance.Stroke property is used to color Line, StepLine, Spline and etc. series
• The SeriesDefinition.Appearance.Fill property is used to color the area of the Area, Bar, Pie and etc series. If you need to color the border of those series use the Stroke property. The Fill property also affects the series item labels.
• The SeriesDefinition.Appearance settings do not reflect the current state of the series (for example the Stroke applied by the theme, or from PaletteBrushes) and that's why if the user hasn't set them, they are null
• The changes to the brushes settings of the SeriesDefinition.Appearance will not be reflected in the Chart Legend. If you are using chart legend you can use PaletteBrushes

Here is a revamped example: 

//sample colors
// [i][0] - Fill
// [i][1] - Stroke
private Color[,] seriesColors = new Color[,]
{
    { Colors.Orange, Colors.Blue },
    { Colors.Red, Colors.Yellow }
};

private void SelectSeries(int index)
{
    //reset the the Fill and Stroke brushes to the initial Color and Opacity
    this.chart.SeriesMappings[index].SeriesDefinition.Appearance.Fill =
        new SolidColorBrush(seriesColors[index, 0]);
    this.chart.SeriesMappings[index].SeriesDefinition.Appearance.Stroke =
        new SolidColorBrush(seriesColors[index, 1]);

    this.chart.DefaultView.ChartArea.SelectSeries(index);

    for (int i = 0; i < this.chart.SeriesMappings.Count; i++)
    {
        if (i == index)  //Skip the currently selected series
            continue;

        //reset the Fill and Stroke brushes of the series
        //that are not currently selected
        this.chart.SeriesMappings[i].SeriesDefinition.Appearance.Fill =
            new SolidColorBrush(seriesColors[i, 0]);
        this.chart.SeriesMappings[i].SeriesDefinition.Appearance.Stroke =
            new SolidColorBrush(seriesColors[i, 1]);

        //lower the opacity
        this.chart.SeriesMappings[i].SeriesDefinition.Appearance.
            Fill.Opacity = 0.1;
        this.chart.SeriesMappings[i].SeriesDefinition.Appearance.
            Stroke.Opacity = 0.1;

        //make sure that the rest of the series is not selected
        this.chart.DefaultView.ChartArea.UnselectSeries(index);
    }
}

I hope this helps.

All the best,
Petar Kirov
the Telerik team