How to Change the Selection Color in .NET MAUI Toolkit Chart (SfCartesianChart)

This article provides guidance on how to customize the selection color in the .NET MAUI Cartesian Chart. The ChartSelectionBehavior allows users to select individual data points or entire series, providing the flexibility to personalize the highlighting color beyond the default limitations.

Datapoint Selection

The ChartSelectionBehavior feature enables users to select individual data points, allowing them to choose specific segments within a series. This capability is facilitated through the use of DataPointSelectionBehavior.

The following code demonstrates how to change the data point selection color in the SfCartesianChart.

XAML:

<chart:SfCartesianChart>
  . . .
    <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Month"      
                         YBindingPath="Sales"> 
        <chart:ColumnSeries.SelectionBehavior>
            <chart:DataPointSelectionBehavior SelectionBrush="#2c66c9"/>
        </chart:ColumnSeries.SelectionBehavior>
    </chart:ColumnSeries>
</chart:SfCartesianChart> 

C#

SfCartesianChart chart = new SfCartesianChart();
. . . 
DataPointSelectionBehavior selection = new DataPointSelectionBehavior();
selection.SelectionBrush = Color.FromArgb("#2c66c9");
ColumnSeries series = new ColumnSeries()
{
   ItemsSource = new ViewModel().Data,
   XBindingPath = "Month",
   YBindingPath = "Sales",
   SelectionBehavior = selection
};

chart.Series.Add(series); 
this.Content = chart;

Output:

Series Selection

The ChartSelectionBehavior feature allows users to easily pick and select any series, giving them the flexibility to choose from multiple series with the help of the SeriesSelectionBehavior.

The following code demonstrates how to change the series selection color in the SfCartesianChart.

XAML:

<chart:SfCartesianChart>
  . . .
   <chart:SfCartesianChart.SelectionBehavior>
     <chart:SeriesSelectionBehavior SelectionBrush ="#314A6E"/>
  </chart:SfCartesianChart.SelectionBehavior>
  <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Value1"/>
  <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Value2"/>
  <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Value3"/>
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
SeriesSelectionBehavior selection = new SeriesSelectionBehavior();
selection.SelectionBrush = Color.FromArgb("#314A6E");
chart.SelectionBehavior = selection;
ColumnSeries series1 = new ColumnSeries()
{
   ItemsSource = new ViewModel().Data,
   XBindingPath = "Name",
   YBindingPath = "Value1"
};

ColumnSeries series2 = new ColumnSeries()
{
   ItemsSource = new ViewModel().Data,
   XBindingPath = "Name",
   YBindingPath = "Value2"
};

ColumnSeries series3 = new ColumnSeries()
{
   ItemsSource = new ViewModel().Data,
   XBindingPath = "Name",
   YBindingPath = "Value3"
};

chart.Series.Add(series1);
chart.Series.Add(series2);
chart.Series.Add(series3);  
this.Content = chart;

Output:

Conclusion

I hope you enjoyed learning about how to change the selection color in .NET MAUI Chart (SfCartesianChart).

You can refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Toolkit documentation to understand how to present and manipulate data.

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

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