Chart Selection

Purpose

This topic introduces the concept of chart’s selection functionality and guides you to the discussion of types of options available. This feature allows users to interactively select, highlight, outline and vice-versa deselect single or multiple series within a chart. This provides many different possibilities with how users interact with the data presented in more meaningful ways.

Configuring Selection

The default behavior SelectionMode turned off and requires opting into one of the following options. There are several selection modes available in the XamDataChart:

Auto
None
Brighten
FadeOthers
GrayscaleOthers
FocusColorThickOutline
FocusColorOutline
SelectionColorThickOutline
SelectionColorOutline
FocusColorFill
SelectionColorFill
ThickOutline

Brighten will fade the selected item while FadeOthers will cause the opposite effect occur. GrayscaleOthers will behave similarily to FadeOthers but instead show a gray color to the rest of the series. Note this will override any SelectionBrush setting. SelectionColorOutline and SelectionColorThickOutline will draw a border around the series.

In conjuction, a SelectionBehavior is available to provide greater control on which items get selected. The default behavior for Auto is PerSeriesAndDataItemMultiSelect.

Auto
PerDataItemMultiSelect
PerDataItemSingleSelect
PerSeriesAndDataItemMultiSelect
PerSeriesAndDataItemSingleSelect
PerSeriesAndDataItemGlobalSingleSelect
PerSeriesMultiSelect
PerSeriesSingleSelect

PerSeriesAndDataItemGlobalSingleSelect allows any one series to be selected at once across all categories compared to PerSeriesSingleSelect that selects the same series for every category at once.

The following is a code example that implements single series selection across all categories example:

In XAML:

<ig:XamDataChart x:Name="Chart" SelectionMode="SelectionColorFill" SelectionBehavior="PerSeriesSingleSelect">
    <ig:XamDataChart.Series>
        <ig:ColumnSeries ValueMemberPath="Coal"
        </ig:ColumnSeries>
		<ig:ColumnSeries ValueMemberPath="Gas"
        </ig:ColumnSeries>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

In C#:

var chart = new XamDataChart();
chart.SelectionMode = SeriesSelectionMode.SelectionColorFill;
chart.SelectionBehavior = SeriesSelectionBehavior.PerSeriesSingleSelect;

Configuring Multiple Selection

Data Item selection will limit one series to be selected across the chart, unless you set use one with that includes series in the name. eg. PerSeriesAndDataItemMultiSelect. This has no restraints.

Other selection modes offer various methods of selection. For example using SelectionBehavior with PerDataItemMultiSelect will select all series in entire category when multiple series are present, but only one category at a time, deselecting anything selected previously.

You would use "PerDataItemSingleSelect" selection when your series are bound to the same data source and you want to select all items in a record in that datasource. For example if the records in the datasource have fields label, value1, value2 and series 1 is bound to value1 and series 2 is bound to value2 then selecting a point on either series would select values from both series.

The following is a code example that implements multiple selection across all data items and series: