How to add rounded corners for specific sides in the Rect series types (SfCartesianChart) ?

Description

This article describes how to add rounded corners to specific sides in the Rect series types.

Solution

Flutter Cartesian chart widget provides support for customizing the corners of the Rect series types using the borderRadius property of the chart series such as column, range column, bar, stacked column, and stacked bar. By using the borderRadius property, you can change the radius of the corners so that the corners can be shaped in either in circular or elliptical shapes.

Refer the following instructions, to customize the specific corners of the Rect series types using the borderRadius property.

Customization of specific corners of the Rect series in rounded format.

Step 1: Initialize the SfCartesianChart with the necessary properties and for Rect series types, the column series type is initialized.

SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            series: <ColumnSeries<_SalesData, String>>[
              ColumnSeries<_SalesData, String>(
                dataSource: chartData,
                xValueMapper: (_SalesData sales, _) => sales.year,
                yValueMapper: (_SalesData sales, _) => sales.sales,
              )
            ]
)

Step 2: To change the shape of the specific corners of the column data points, the borderRadius property can be used, in which the BorderRadius.only() method can be returned with which you can assign necessary radii values for the required corners with the help of the optional parameters of the BorderRadius.only() method. The parameters are as follows:

• topLeft – Indicates the radius of the top left corner of the rect.
• topRight – Indicates the radius of the top right corner of the rect.
• bottomLeft – Indicates the radius of the bottom left corner of the rect.
• bottomRight – Indicates the radius of the bottom right corner of the rect.

  ColumnSeries<_SalesData, String>(
                  dataSource: chartData,
                  borderRadius: BorderRadius.only(
                          // The top left and bottom right corners radii are changed to make them 
                          // as rounded corners.
                          topLeft: Radius.circular(25), 
                          bottomRight: Radius.circular(25)),
                  xValueMapper: (_SalesData sales, _) => sales.year,
                  yValueMapper: (_SalesData sales, _) => sales.sales,
   
                )
  

​Screenshots

Customization of specific corners of the column series.

For more information on the borderRadius property, find the user guide here.

View the sample in GitHub