Knowledgebase
Series Selection and Selected Series Styling
Posted by Admin - on 13 February 2019 12:43 PM

BaseRenderableSeries.IsSelected

Each BaseRenderableSeries has the IsSelected property. When set to True, two things happen:

  1. The Series Z-order is modified, any selected series are drawn last (highest Z-order)
  2. A BaseRenderableSeries.SelectedSeriesStyle is applied to the series.

This allows us to do some things to change the visual appearance of RenderableSeries when selected.

Styling the Selected Series

To set a SelectedSeriesStyle on a RenderableSeries, use the following XAML:

<s:FastLineRenderableSeries>
    <s:FastLineRenderableSeries.SelectedSeriesStyle>
        <!-- When a series is selected, apply this style -->
        <!-- Changes SeriesColor to white on click -->
        <!-- Applies a PointMarker -->
        <Style TargetType="s:FastLineRenderableSeries">
            <Setter Property="Stroke" Value="White" />
            <Setter Property="PointMarkerTemplate">
                <Setter.Value>
                    <!-- This is how we do PointMarkerTemplates in Scichart v2.0. You can either declare an EllipsePointMarker inline, -->
                    <!-- or, if templating (because you are sharing a style across many series), then use a ControlTemplate with a BasePointMarker, -->
                    <!-- or UIElement to replicate across each data-point -->
                    <ControlTemplate>
                        <s:EllipsePointMarker Fill="#FF00DC" Stroke="White" Width="7" Height="7"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </s:FastLineRenderableSeries.SelectedSeriesStyle>
</s:FastLineRenderableSeries>

Now, whenever the IsSelected property is set on this RenderableSeries, then the SelectedSeriesStyle above will be applied, in this case, changing its Stroke and applying a PointMarker.

Using the SeriesSelectionModifier

Also it is possible to set the style only once in the SeriesSelectionModifier using the SelectedSeriesStyle property in more general cases (it will be applied to all series):

<s:SeriesSelectionModifier>
    <s:SeriesSelectionModifier.SelectedSeriesStyle>
        <!-- This style will be applied to all RenderableSeries -->
        <Style TargetType="s:BaseRenderableSeries">
            <Setter Property="Stroke" Value="White" />
        </Style>
    </s:SeriesSelectionModifier.SelectedSeriesStyle>
</s:SeriesSelectionModifier>

Notice, that SelectedSeriesStyle from modifier has lower priority than its counterpart from the RenderableSeries, so any style explicitly set on the RenderableSeries will override the one from modifier.

This will result in the following visual appearance when a series is selected:

Complete Example on SeriesSelectionModifier

There is an example in the SciChart Examples Suite which shows how to combine the SeriesSelectionModifier with the BaseRenderableSeries.SelectedSeriesStyle property to automatically enable mouse-click selection. In the demo, it can be found at Tooltips and Hit-Test -> Series Selection.

Full source code of the example can be found online at this link.

Further Reading

If you want to create a Custom Chart Modifier to perform selection, e.g. on mouse-over, then you can use our Hit-Test API

For more information about Series Selection in SciChart, please see the following documentation articles:

(1 vote(s))
Helpful
Not helpful

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725