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!
