Customization in Flutter Circular Chart

18 Nov 20184 minutes to read

Chart sizing

The chart renders based on the parent widget size. If you need the chart to be rendered in a specific size, set the size (width and height) on 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

The chart margin 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 chart area using the following 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'),
              )
            )
          )
        )
      );
    }