We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the data point selection color?

Platform: Xamarin.Forms |
Control: SfChart

Description:

ChartSelectionBehavior allows you to select any data point, that is, a segment in the series. This behavior highlights the particular segment inside the series. The selected segment color is not restricted to the default color.

Solution:

Essential chart for Xamarin.Forms provides data point selection and allows you to change the selected segment color for series. The SelectedDataPointColor property is used to define the custom color for the selected segment.

 

Note:

This property works only when you enable the EnableDataPointSelection property in series.

 

The following code example shows the selection feature for series segment.

XAML

<chart:SfChart.Series>
    <chart:ColumnSeries ItemsSource="{Binding Data}" 
       EnableDataPointSelection="True"  SelectedDataPointColor="#B399E6" />
</chart:SfChart.Series>

C#

ColumnSeries series = new ColumnSeries()
{
  EnableDataPointSelection = true,
  SelectedDataPointColor = Color.FromRgba(0.7, 0.6, 0.9, 1),
  ItemsSource = GetData()
};
chart.Series.Add(series);

Output:

Column chart segment is selected in Xamarin.Forms

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
John Rennemeyer
Dec 07, 2015
Is there a way to disable the selection color? In our case, we are using a PieSeries which explodes the selected item when tapped. We want the explode to occur, but not the color change. When we do not specify a SelectedDataPointColor, it defaults to some grayish color. Reply
Karthikeyan V [Syncfusion]
Dec 08, 2015
Hi John, We have analyzed your requirement. You can achieve your requirement with help of SelectionChanging event in chart. Please refer the below code example. Code Example: Chart.SelectionChanging += (object sender, ChartSelectionChangingEventArgs e) => { e.Cancel = true;// To avoid the selection color (e.SelectedSeries as PieSeries).ExplodeIndex = e.SelectedDataPointIndex; }; Regards, Karthikeyan V.
Gabriele
Sep 14, 2017

Hello how deactvate the color change for the selected bar in the BarSeries chart type?

Reply
Muneesh Kumar G [Syncfusion]
Sep 15, 2017

Hi Garbiele,

 

We are able to achieve your requirement to deactivate the color change for the selected bar by using below solutions.

 

Soloution 1 :

 

By tap the selected bar again.

 

Solution 2 :

 

Set the SelectedDataPointIndex = -1 via programmatically as per the below code snippet.

 

Code Snippet[C#]

 

series.SelectedDataPointIndex = -1;

 

Thanks,

Muneesh Kumar G.

 Reply
sivanarayanareddy
Mar 21, 2022

is there a way to get only one colour to selected bar on sf chart series when we have more columns

Reply
Yuvaraj Palanisamy [Syncfusion]
Mar 24, 2022

Hi Sivanarayanareddy,

You can achieve your requirement with the help of setting SelectedDataPointIndex as -1 for previous selected series in the SelectionChanged event as per the below code example.

CodeSnippet: [MainPage.xaml]

<chart:SfChart VerticalOptions="FillAndExpand"
               SelectionChanged="SfChart_SelectionChanged" >
. . .
    <chart:SfChart.Series>
        <chart:ColumnSeries ItemsSource="{Binding Data}"
                            EnableDataPointSelection="True"
                            EnableTooltip="True"
                            SelectedDataPointColor="Orange"
                            XBindingPath="CatValue"
                            YBindingPath="YValue">
        </chart:ColumnSeries>

        <chart:ColumnSeries ItemsSource="{Binding Data}"
                            EnableDataPointSelection="True"
                            EnableTooltip="True"
                            SelectedDataPointColor="Orange"
                            XBindingPath="CatValue"
                            YBindingPath="YValue1">
        </chart:ColumnSeries>

        <chart:LineSeries ItemsSource="{Binding Data}"
                          Label="Customers"
                          XBindingPath="CatValue"
                          YBindingPath="YValue">
        </chart:LineSeries>
    </chart:SfChart.Series>
</chart:SfChart>

MainPage.xaml.cs

ChartSeries previousSelectedSeries;

private void SfChart_SelectionChanged(object sender, ChartSelectionEventArgs e)
{
    if(previousSelectedSeries != null && previousSelectedSeries != e.SelectedSeries)
    {
        previousSelectedSeries.SelectedDataPointIndex = -1;
    }
    previousSelectedSeries = e.SelectedSeries;
}

We have attached the sample for your reference. Please find the sample from the below link

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSample657441440

Please let us know if you need any further assistance.

Regards, Yuvaraj.

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile