Selection

You can choose what element of the FlexChart should be selected when the user taps on any region in a FlexChart by setting the SelectionMode property. This property provides three options:

None: Does not select any element.
Point: Highlights the point that the user taps.
Series: Highlights the series that the user taps.

You can also set the SelectedBorderColor and SelectedBorderWidth properties of the FlexChart control to customize the selected item.

The images below show how the FlexChart appears after these properties have been set.

When SelectionMode is set to Series

When SelectionMode is set to Point

The following code examples demonstrate how to set these properties in C# and in XAML. These examples use the samples created in the Quick Start section.

In Code

C#	Copy Code
chart.SelectionMode = Xuni.Xamarin.ChartCore.ChartSelectionModeType.Point; chart.SelectedBorderColor = Color.FromHex("#FFFFFF"); chart.SelectedBorderWidth = 5; chart.SelectedDashes = new double[] { 2, 1 };

Copy Code

chart.SelectionMode = Xuni.Xamarin.ChartCore.ChartSelectionModeType.Point;
chart.SelectedBorderColor = Color.FromHex("#FFFFFF");
chart.SelectedBorderWidth = 5;
chart.SelectedDashes = new double[] { 2, 1 };

In XAML

XAML	Copy Code
<xuni:FlexChart x:Name="chart" ChartType="Column" ItemsSource="{Binding Data}" BindingX="Name" SelectionMode="Point" SelectedBorderColor="#FFFFFF" SelectedBorderWidth = "5" SelectedDashes="2,1" Grid.Row="1" Grid.ColumnSpan="2"> <xuni:FlexChart.Series> <xuni:ChartSeries x:Name="Sales2014" Name="2014 Sales" Binding="Sales" ></xuni:ChartSeries> </xuni:FlexChart.Series> </xuni:FlexChart>

XAML

Copy Code

<xuni:FlexChart x:Name="chart" ChartType="Column" ItemsSource="{Binding Data}" BindingX="Name"
 SelectionMode="Point" SelectedBorderColor="#FFFFFF" SelectedBorderWidth = "5" SelectedDashes="2,1"
 Grid.Row="1" Grid.ColumnSpan="2">
  <xuni:FlexChart.Series>
    <xuni:ChartSeries x:Name="Sales2014" Name="2014 Sales" Binding="Sales" ></xuni:ChartSeries>
  </xuni:FlexChart.Series>
</xuni:FlexChart>