Customization in Flutter Circular Charts (SfCircularChart)

7 Aug 20254 minutes to read

Chart sizing

Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. By default initializing only the SfCircularChart without defining any of its properties renders a white screen.

DART

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              // height of the Container widget
              height: 300, 
              // width of the Container widget
              width: 350,  
              child: SfCircularChart()
            )
          )
        )
      );
    }

Chart margin

Margin to the chart can be specified using the margin property.

DART

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
        child: Container(
          height: 300, 
          width: 350, 
          child: SfCircularChart(
              borderColor: Colors.red,
              borderWidth: 2,
              // Sets 15 logical pixels as margin for all the 4 sides.
              margin: EdgeInsets.all(15)
              )
            )
          )
        )
      );
    }

Chart area customization

You can customize the area of the chart using the below properties.

• backgroundColor - used to change the chart area background color.
• backgroundImage - used to set the image path.
• borderWidth - used to change chart area the border width.
• borderColor - used to change the chart area border color.

DART

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              height: 300, 
              width: 350, 
              child: SfCircularChart(
                backgroundColor: Colors.lightGreen,
                backgroundImage: AssetImage('images/apple.png'),
              )
            )
          )
        )
      );
    }