How to Set .NET MAUI CartesianChart Corner Radius of Column Segment?

This article explores how to customize the corner radius of individual column segments in the .NET MAUI CartesianChart 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 article 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 clearly differentiate negative values.

The following sections provide a step-by-step implementation.

Steps to Implement

1. 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();
   }
} 

2. Create a Custom Segment Class

• Define a CustomColumnSegment class that extends ColumnSegment.
• Inside the Draw method:
  • If the YValue (profit/loss) is positive, we assign a rounded CornerRadius(50, 50, 0, 0).
  • If it’s negative, we 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
           }
       }
   }
} 

3. 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

Explore the runnable demo from this GitHub location.

Conclusion
I hope you enjoyed learning how to set .NET MAUI Cartesian Chart corner radius of 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 for configuration specifications. You can also explore our .NET MAUI Cartesian Chart example 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!