My Profile
Sign Out
Tickets
Knowledge Base
Login
Articles in this section
Category / Section
  2. Xamarin.Forms
  3. SfChart

How to change the data point selection color in Xamarin.Forms Charts?

1 min read

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 in the Xamarin.Forms Charts.

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


Conclusion

I hope you enjoyed learning about how to change the data point selection color in Xamarin.Forms Charts.

You can refer to our Xamarin.Forms Charts feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms Charts documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Did not find the solution Contact Support
Comments (4)
Please  to leave a comment
JR
John Rennemeyer
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.
KV
Karthikeyan V
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.
GA
Gabriele

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

MK
Muneesh Kumar G

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.
SI
sivanarayanareddy

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

YP
Yuvaraj Palanisamy

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.
Access denied
Access denied