We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Flutter |
Control: SfCartesianChart |
Published Date: November 10, 2020 |
Last Revised Date: November 10, 2020

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: <ChartSeries<_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.

 

Customization of specific corners of column series.

 

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

View the sample in GitHub

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile