This article explores how to customize the corner radius of individual column segments in the .NET MAUI Cartesian Chart using a custom column series implementation. By adjusting the corner radius based on data values, you can enhance the readability of financial reports, sales performance dashboards, and other analytical charts. This guide demonstrates how to differentiate profit and loss bars in financial reports for better clarity: Profit Bars: Applied with top-rounded corners for a visually distinct representation. Loss Bars: Applied with bottom-rounded corners to differentiate negative values. The following sections provide a step-by-step implementation. Steps to Implement Extend the ColumnSeries Class Create a CustomColumnSeries class that extends ColumnSeries. Override the CreateSegment method to return a CustomColumnSegment instead of the default ColumnSegment. This ensures that each column segment can be customized with different corner radii. public class ColumnSeriesExt : ColumnSeries { protected override ChartSegment CreateSegment() { return new ColumnSegmentExt(); } } Create a Custom Segment Class Define a CustomColumnSegment class that extends ColumnSegment. Inside the Draw method: If the YValue (profit/loss) is positive, assign a rounded CornerRadius(50, 50, 0, 0). If it’s negative, assign CornerRadius(0, 0, 50, 50) for bottom edges. This allows each segment to visually differentiate between profit (top-rounded) and loss (bottom-rounded). public class ColumnSegmentExt : ColumnSegment { protected override void Draw(ICanvas canvas) { var rect = new Rect() { Left = Left, Top = Top, Right = Right, Bottom = Bottom }; canvas.SetFillPaint(Fill, rect); if (Item is Model model) { // Assign different corner radius based on data value if (model.Sales > 0) { canvas.FillRoundedRectangle(rect, 50.0, 50.0, 0.0, 0.0); // Rounded at top } else { canvas.FillRoundedRectangle(rect, 0.0, 0.0, 50.0, 50.0); // Rounded at bottom } } } } Define the Chart in XAML Replace the standard ColumnSeries with the custom ColumnSeriesExt in the SfCartesianChart to enable corner radius customization. <chart:SfCartesianChart> <chart:SfCartesianChart.XAxes> <chart:CategoryAxis/> </chart:SfCartesianChart.XAxes> <chart:SfCartesianChart.YAxes> <chart:NumericalAxis/> </chart:SfCartesianChart.YAxes> <local:ColumnSeriesExt ItemsSource="{Binding SalesData}" XBindingPath="Month" YBindingPath="Sales" ShowDataLabels="True"> <local:ColumnSeriesExt.DataLabelSettings> <chart:CartesianDataLabelSettings LabelPlacement="Outer"/> </local:ColumnSeriesExt.DataLabelSettings> </local:ColumnSeriesExt> </chart:SfCartesianChart> var chart = new CartesianChart(); var series = new ColumnSeriesExt(); series.ItemsSource = SalesData; ... chart.Series.Add(series); this.Content = chart; Output Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to set the .NET MAUI Cartesian Chart’s corner radius of the column segment. You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI Cartesian Chart example to understand how to create and manipulate data. For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article explains how to render the area chart color and border color based on whether the data points are positive or negative. Using the onCreateShader property of the AreaSeries, we created a custom shader that dynamically changes the area color and border color for the area series. The following steps outline how to update area chart color and border color based on positive and negative values in Flutter CartesianChart. Step 1: Initialize the Data Source First, initialize the data source for the chart. The data source contains the sales data for each month, including both positive and negative values. class SalesData { SalesData(this.year, this.sales); final String year; final double sales; } List<SalesData> data = [ SalesData('Jan', 35), SalesData('Feb', 28), SalesData('Mar', 0), SalesData('Apr', -32), SalesData('May', -40) ]; Step 2: Create Area series To initialize the AreaSeries, create an SfCartesianChart and define the primaryXAxis as CategoryAxis to categorize data points, such as year in this example. Then, add the AreaSeries inside the series property, specifying the dataSource, xValueMapper for the x-axis labels, and yValueMapper for plotting values. Customize the appearance with color and borderColor property in area series. This setup helps visualize data trends effectively. SfCartesianChart( primaryXAxis: const CategoryAxis(), series: <CartesianSeries<SalesData, String>>[ AreaSeries<SalesData, String>( dataSource: data, xValueMapper: (SalesData data, int index) => data.year, yValueMapper: (SalesData data, int index) => data.sales, color: Colors.green.withOpacity(0.3), borderColor: Colors.red, ), ], ) Step 3: Customize the area color and border color based on positive and negative values To dynamically update the area color based on whether data points are positive or negative, the onCreateShader property of the AreaSeries is used. This allows a custom gradient where green is applied to positive values and red to negative ones. Additionally, the onActualRangeChanged callback calculates the mid-value of the visible range, ensuring accurate color transitions by determining the split between positive and negative regions. double midValue = 0; SfCartesianChart( primaryXAxis: const CategoryAxis(), onActualRangeChanged: (ActualRangeChangedArgs rangeChangedArgs) { if (rangeChangedArgs.orientation == AxisOrientation.vertical) { midValue = rangeChangedArgs.visibleMax / (rangeChangedArgs.visibleMax.abs() + rangeChangedArgs.visibleMin.abs()); } }, series: <CartesianSeries<SalesData, String>>[ AreaSeries<SalesData, String>( dataSource: data, xValueMapper: (SalesData data, int index) => data.year, yValueMapper: (SalesData data, int index) => data.sales, color: Colors.green.withOpacity(0.3), onCreateShader: (ShaderDetails details) { return ui.Gradient.linear( details.rect.topCenter, details.rect.bottomCenter, <Color>[ Colors.green, Colors.green, Colors.red, Colors.red, ], <double>[ 0, midValue, midValue, 0.99999, ], ); }, borderColor: Colors.red, ), ], ) Final output: View the Github Sample here. Conclusion I hope you enjoyed learning about how to update area chart color and border color based on positive and negative values in Flutter Cartesian Chart. You can refer to our Flutter CartesianChart feature tour page to learn about its other groundbreaking feature representations. You can also explore our 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!
The .NET MAUI Cartesian Chart allows you to display X and Y values of the trackball moving trace in labels. This can be achieved using the TrackballCreated event provided by the SfCartesianChart. Step 1 : Initialize the SfCartesianChart with Trackball Behavior and create the TrackballCreated event, which is triggered when the trackball moves from one data point to another. Refer to the documentation for detailed steps on initializing the SfCartesianChart. [XAML] <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="8*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <chart:SfCartesianChart x:Name="chart" Grid.Column="0" TrackballCreated="chart_TrackballCreated"> </chart:SfCartesianChart.XAxes> <chart:DateTimeAxis Interval="2" EdgeLabelsVisibilityMode="AlwaysVisible"/> </chart:SfCartesianChart.XAxes> <chart:SfCartesianChart.YAxes> <chart:NumericalAxis/> </chart:SfCartesianChart.YAxes> <chart:SfCartesianChart.TrackballBehavior> <chart:ChartTrackballBehavior ShowLabel="False"/> </chart:SfCartesianChart.TrackballBehavior> <chart:SfCartesianChart.Legend> <chart:ChartLegend/> </chart:SfCartesianChart.Legend> <chart:LineSeries ItemsSource="{Binding ProductSalesDetails}" x:Name="series1" XBindingPath="Date" YBindingPath="ProductASales" StrokeWidth="3" ShowTrackballLabel="True" Label="Product A" Fill="RoyalBlue"/> <chart:LineSeries ItemsSource="{Binding ProductSalesDetails}" x:Name="series2" XBindingPath="Date" YBindingPath="ProductBSales" StrokeWidth="3" ShowTrackballLabel="True" Label="Product B" Fill="HotPink"/> <chart:LineSeries ItemsSource="{Binding ProductSalesDetails}" x:Name="series3" XBindingPath="Date" YBindingPath="ProductCSales" StrokeWidth="3" ShowTrackballLabel="True" Label="Product C" Fill="Green"/> </chart:SfCartesianChart> </Grid> Step 2 : Create a VerticalStackLayout inside the Grid to display the X and Y values from the trackball interaction. [XAML] <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="8*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <chart:SfCartesianChart x:Name="chart" Grid.Column="0" TrackballCreated="chart_TrackballCreated"> <!-- Chart configuration goes here --> . . . </chart:SfCartesianChart> <VerticalStackLayout Grid.Column="1" HorizontalOptions="Center"> <!-- Title for trackball values section --> <Label HorizontalOptions="Center" Text="Trackball Values" FontAttributes="Bold"/> <!-- Container for the first series trackball value --> <VerticalStackLayout> <Frame Background="LightBlue" CornerRadius="8" Margin="5" BorderColor="Gray"> <HorizontalStackLayout HorizontalOptions="Center" Spacing="10" VerticalOptions="Center"> <Label x:Name="dateLabel1" FontSize="14" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center"/> <Label Text=" : " FontSize="14" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center"/> <Label x:Name="valueLabel1" FontSize="14" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center"/> </HorizontalStackLayout> </Frame> </VerticalStackLayout> <!-- Container for the second series trackball value --> <VerticalStackLayout> <Frame Background="Pink" CornerRadius="8" Margin="5" BorderColor="Gray"> <HorizontalStackLayout HorizontalOptions="Center" Spacing="10" VerticalOptions="Center"> <Label x:Name="dateLabel2" FontSize="14" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center"/> <Label Text=" : " FontSize="14" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center"/> <Label x:Name="valueLabel2" FontSize="14" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center"/> </HorizontalStackLayout> </Frame> </VerticalStackLayout> <!-- Container for the third series trackball value --> <VerticalStackLayout> <Frame Background="LightGreen" CornerRadius="8" Margin="5" BorderColor="Gray"> <HorizontalStackLayout HorizontalOptions="Center" Spacing="10" VerticalOptions="Center"> <Label x:Name="dateLabel3" FontSize="14" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center"/> <Label Text=" : " FontSize="14" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center"/> <Label x:Name="valueLabel3" FontSize="14" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center"/> </HorizontalStackLayout> </Frame> </VerticalStackLayout> </VerticalStackLayout> </Grid> Step 3 : Finally, handle the TrackballCreated event to bind the corresponding date and value labels based on the trackball’s position and customize marker settings for each series. [C#] private void chart_TrackballCreated(object sender, TrackballEventArgs e) { // Retrieve the trackball points information var items = e.TrackballPointsInfo; foreach (var item in items) { var series = item.Series; if (series == series1) { // Configure marker settings for the first series item.MarkerSettings = new ChartMarkerSettings() { Fill = Colors.DeepSkyBlue, Width = 15, Height = 15, Stroke = Colors.RoyalBlue, StrokeWidth = 3, Type = ShapeType.InvertedTriangle }; // Bind the date label to the date from the data item with a specific format dateLabel1.SetBinding(Label.TextProperty, new Binding("Date") { Source = item.DataItem, StringFormat = "{0:dd/MM/yyyy}" }); // Bind the value to the label from the item valueLabel1.SetBinding(Label.TextProperty, new Binding("Label") { Source = item }); } else if (series == series2) { // Configure marker settings for the second series item.MarkerSettings = new ChartMarkerSettings() { Fill = Colors.LightPink, Width = 15, Height = 15, Stroke = Colors.HotPink, StrokeWidth = 3, Type = ShapeType.Cross }; // Bind the date label to the date from the data item with a specific format dateLabel2.SetBinding(Label.TextProperty, new Binding("Date") { Source = item.DataItem, StringFormat = "{0:dd/MM/yyyy}" }); // Bind the value to the label from the item valueLabel2.SetBinding(Label.TextProperty, new Binding("Label") { Source = item }); } else if (series == series3) { // Configure marker settings for the third series item.MarkerSettings = new ChartMarkerSettings() { Fill = Colors.LightSeaGreen, Width = 15, Height = 15, Stroke = Colors.Green, StrokeWidth = 3, Type = ShapeType.Diamond }; // Bind the date label to the date from the data item with a specific format dateLabel3.SetBinding(Label.TextProperty, new Binding("Date") { Source = item.DataItem, StringFormat = "{0:dd/MM/yyyy}" }); // Bind the value to the label from the item valueLabel3.SetBinding(Label.TextProperty, new Binding("Label") { Source = item }); } } } This setup allows the TrackballCreated method to manage and display the trackball values dynamically for each series with unique marker styles. Output Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to display X and Y values of a trackball trace in labels in .NET MAUI Cartesian Chart. Refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This guide will walk you through configuring and customizing the .NET MAUI Syncfusion® theme for the SfCartesianChart. Syncfusion® themes enable you to apply colors uniformly to .NET MAUI Cartesian Charts, providing a consistent look and feel for your applications. Let’s take a look at the following sections: How to Set the Theme for the Application Dynamically Changing Themes Overriding the Default Theme How to Set the Theme for the Application By default, Syncfusion® provides support for both light and dark themes through the inclusion of a SyncfusionThemeResourceDictionary. Initialize and assign the desired theme in your application, modify the App.xaml file as follows: <Application xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <syncTheme:SyncfusionThemeResourceDictionary VisualTheme="MaterialLight"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application> Light Theme Dark Theme Dynamically Changing Themes Syncfusion® allows for dynamic theme switching within your application. This can be achieved by updating the VisualTheme property at runtime. Here is an example in C#: ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries; if (mergedDictionaries != null) { var theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault(); if (theme != null) { if (state == false) { theme.VisualTheme = SfVisuals.MaterialLight; } else { theme.VisualTheme = SfVisuals.MaterialDark } } } Overriding the Default Theme The theme resource dictionary contains a set of keys that are mapped to styles in control style dictionaries. The default appearance of themes can be customized by overriding these key values. You can find the keys for the Cartesian Chart here: Cartesian Chart Theme Keys. For example, the major grid lines and tooltip background values are customized by overriding theme keys. <Application xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <syncTheme:SyncfusionThemeResourceDictionary VisualTheme="MaterialLight"/> <ResourceDictionary> <Color x:Key="SfCartesianChartMajorGridLineStroke">Lime</Color> <Color x:Key="SfCartesianChartTooltipBackground">Pink</Color> </ResourceDictionary> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application> For more information, please refer to the Syncfusion® .NET MAUI Cartesian Chart Theme Demo Conclusion I hope you enjoyed learning how to configure and customize themes in your .NET MAUI applications using the Syncfusion®'s SfCartesianChart control. You can refer to our .NET MAUI Cartesian Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data. For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article provides a detailed walkthrough on how to customize the legend item in a .NET MAUI Cartesian Chart using the LegendItemCreated event. The SfCartesianChart provides a LegendItemCreated event, which is triggered when a chart legend item is created. This event is particularly useful for customizing the legend to match your application’s design. The event argument contains the LegendItem object, which includes the following properties: IconType – used to get or set the icon type for the legend icon. IconHeight – used to get or set the icon height of the legend icon. IconWidth – used to get or set the icon width of the legend icon. IconBrush – used to change the color of the legend icon. Text – used to get or set the text of the label. TextColor – used to get or set the color of the label. TextMargin – used to get or set the margin size of labels. FontSize – used to get or set the font size for the legend label. FontAttribute – used to get or set the font style for the legend label. FontFamily – used to get or set the fontfamily for the legend label. IsToggled – used to get or set the toggle visibility of the legend. DisableBrush – used to get or set the legend icon and text disable color when toggled. Index – used to get the corresponding index for legend item. Item – used to get the corresponding series for the legend item. Learn step-by-step instructions and gain insights to customize the legend items for each series. Step 1: Initialize the SfCartesianChart and add the series to it as follows XAML <chart:SfCartesianChart> <chart:SfCartesianChart.Series> <chart:LineSeries ItemsSource="{Binding France}" XBindingPath="Year" YBindingPath="Revenue" Label="France" StrokeWidth="1.5"/> <chart:LineSeries ItemsSource="{Binding Germany}" XBindingPath="Year" YBindingPath="Revenue" Label="Germany" StrokeWidth="1.5"/> <chart:LineSeries ItemsSource="{Binding Italy}" XBindingPath="Year" YBindingPath="Revenue" Label="Italy" StrokeWidth="1.5"/> <chart:LineSeries ItemsSource="{Binding Spain}" XBindingPath="Year" YBindingPath="Revenue" Label="Spain" StrokeWidth="1.5"/> </chart:SfCartesianChart.Series> </chart:SfCartesianChart> Step 2: Initialize the ChartLegend in SfCartesianChart and set up the LegendItemCreated event XAML <chart:SfCartesianChart> <chart:SfCartesianChart.Legend> <chart:ChartLegend LegendItemCreated="ChartLegend_LegendItemCreated"/> </chart:SfCartesianChart.Legend> </chart:SfCartesianChart> Step 3: Customize the legend item for each series using the LegendItemCreated event handler method. C# private void ChartLegend_LegendItemCreated(object sender, LegendItemEventArgs e) { e.LegendItem.FontSize = 20; e.LegendItem.IconHeight = 17; e.LegendItem.IconWidth = 17; switch (e.LegendItem.Index) { case 0: SetLegendItem(e, ShapeType.Hexagon, FontAttributes.Bold, Colors.Crimson, "Arial"); break; case 1: SetLegendItem(e, ShapeType.Rectangle, FontAttributes.Italic, Colors.Indigo, "TimesNewRoman"); break; case 2: SetLegendItem(e, ShapeType.Diamond, FontAttributes.Italic, Colors.DarkCyan, "Verdana"); break; default: SetLegendItem(e, ShapeType.Circle, FontAttributes.None, Colors.YellowGreen, "Georgia"); break; } } private void SetLegendItem(LegendItemEventArgs e, ShapeType iconType, FontAttributes fontAttributes, Color textColor, string fontFamily) { e.LegendItem.IconType = iconType; e.LegendItem.FontAttributes = fontAttributes; e.LegendItem.TextColor = textColor; e.LegendItem.FontFamily = fontFamily; } Output: Conclusion: I hope you enjoyed learning how to customize legend items via LegendItemCreated in MAUI Chart. You can refer to our .NET MAUI Cartesian Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data. For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article provides a detailed walkthrough on how to customize the trackball markers in a .NET MAUI Cartesian Chart using the TrackballCreated event. The SfCartesianChart provides a TrackballCreated event which occurs when the trackball moves from one data point to another. This event argument contains an object of the TrackballPointsInfo, which contains MarkerSettings property. The TrackballCreated event in the SfCartesianChart provides access to and allows manipulation of the following properties to modify the appearance of the trackball marker: Fill – Changes the marker background color. Height – Adjusts the marker height. Stroke - Modifies the marker border color. StrokeWidth - Sets the width of the marker border. Type - Defines the marker shape type. Width - Adjusts the marker width. Learn step-by-step instructions and gain insights to customize the trackball marker for each series. Step 1: Initialize ChartTrackballBehavior in a SfCartesianChart. XAML <chart:SfCartesianChart> <chart:SfCartesianChart.TrackballBehavior> <chart:ChartTrackballBehavior /> </chart:SfCartesianChart.TrackballBehavior> </chart:SfCartesianChart> Step 2: Setting up the TrackballCreated event in SfCartesianChart. XAML <chart:SfCartesianChart TrackballCreated="SfCartesianChart_TrackballCreated"> ... </chart:SfCartesianChart> Step 3: Add multiple series to the SfCartesianChart as follows: XAML <chart:SfCartesianChart.Series> <chart:LineSeries x:Name="series1" ItemsSource="{Binding DataItems}" XBindingPath="Year" YBindingPath="Value" Label="Person A" Fill="RoyalBlue" StrokeWidth="2"> </chart:LineSeries> <chart:LineSeries x:Name="series2" ItemsSource="{Binding DataItems2}" XBindingPath="Year" YBindingPath="Value" Label="Person B" Fill="HotPink" StrokeWidth="2"> </chart:LineSeries> <chart:LineSeries x:Name="series3" ItemsSource="{Binding DataItems3}" XBindingPath="Year" YBindingPath="Value" Label="Person C" Fill="Green" StrokeWidth="2"> </chart:LineSeries> </chart:SfCartesianChart.Series> Step 4: Customize trackball markers for each series using the TrackballCreated event handler method. C# private void SfCartesianChart_TrackballCreated(object sender, TrackballEventArgs e) { var items = e.TrackballPointsInfo; foreach (var item in items) { var series = item.Series; if (series == series1) { item.MarkerSettings = new ChartMarkerSettings() { Fill = Colors.DeepSkyBlue, Width = 15, Height = 15, Stroke = Colors.RoyalBlue, StrokeWidth = 2, Type = ShapeType.InvertedTriangle }; } else if (series == series2) { item.MarkerSettings = new ChartMarkerSettings() { Fill = Colors.LightPink, Width = 15, Height = 15, Stroke = Colors.HotPink, StrokeWidth = 2, Type = ShapeType.Cross }; } else if (series == series3) { item.MarkerSettings = new ChartMarkerSettings() { Fill = Colors.LightSeaGreen, Width = 15, Height = 15, Stroke = Colors.Green, StrokeWidth = 2, Type = ShapeType.Diamond }; } } } Output: Conclusion: I hope you enjoyed learning how to customize the trackball marker in a .NET MAUI Cartesian Chart. You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article provides guidance on customizing the selection color in the .NET MAUI Cartesian Chart. The ChartSelectionBehavior allows users to select individual data points or entire series, providing flexibility to personalize the highlight 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 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 how to change the selection color in .NET MAUI Cartesian Chart. You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Cartesian Chart 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®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI Cartesian Chart is used for forecasting, providing predictions or estimates of future values based on data and statistical models. By analyzing past data, forecasts offer valuable insights for decision-making and planning. To create a forecast chart, you can follow these steps: Step 1: Initialize the chart using this document. Step 2: Add a dotted forecast line in your application by using the StrokeDashArray property. This property is a double array property that can be set using a resource and then bound to a key. XAML <chart:SfCartesianChart> <chart:SfCartesianChart.Resources> <DoubleCollection x:Key="dashArray"> <x:Double>3</x:Double> <x:Double>2</x:Double> </DoubleCollection> </chart:SfCartesianChart.Resources> <chart:SplineSeries ItemsSource="{Binding Data}" XBindingPath="Year" YBindingPath="Sales"/> <chart:SplineSeries ItemsSource="{Binding Data}" XBindingPath="Year" YBindingPath="ForeCast" StrokeDashArray="{StaticResource dashArray}"/> </chart:SfCartesianChart> C# SfCartesianChart chart = new SfCartesianChart(); DoubleCollection doubleCollection = new DoubleCollection(); doubleCollection.Add(3); doubleCollection.Add(2); SplineSeries series = new SplineSeries() { ItemsSource = new ViewModel().Data, XBindingPath = "Year", YBindingPath = "Sales" }; SplineSeries series2 = new SplineSeries() { ItemsSource = new ViewModel().Data, XBindingPath = "Year", YBindingPath = "ForeCast", StrokeDashArray = doubleCollection }; chart.Series.Add(series); chart.Series.Add(series2); this.Content = chart; Model public class ChartData { public string Year { get; set; } public double? Sales { get; set; } public double? ForeCast { get; set; } } ViewModel public class ViewModel { public ObservableCollection<ChartData> Data { get; set; } public ObservableCollection<Brush> CustomColor { get; set; } public ViewModel() { Data = new ObservableCollection<ChartData>() { new ChartData(){Year="2010",Sales = 3200}, new ChartData(){ Year="2011",Sales = 2000}, new ChartData(){ Year="2012",Sales = 4500}, new ChartData(){ Year="2013",Sales = 6000}, new ChartData(){ Year="2014",Sales = 5500}, new ChartData(){ Year="2015",Sales = 4600,ForeCast = 4600}, new ChartData(){ Year="2016",ForeCast = 4500}, new ChartData(){ Year="2017",ForeCast = 5500}, new ChartData(){ Year="2018",ForeCast = 6000}, new ChartData(){ Year="2019",ForeCast = 4800}, new ChartData(){ Year="2020",ForeCast = 5000}, new ChartData(){ Year="2021",ForeCast = 6500}, }; CustomColor = new ObservableCollection<Brush>() { new SolidColorBrush(Color.FromArgb("#ff944d")), new SolidColorBrush(Color.FromArgb("#33bbff")) }; } } Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to create a dotted forecast line chart in .NET MAUI Cartesian Chart. You can refer to our .NET MAUI Cartesian Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Cartesian Chart documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI Controls from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Cartesian Chart and other .NET MAUI controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
