Appearance customization in Flutter Pyramid Chart (SfPyramidChart)

22 Apr 20214 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.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
              body: SafeArea(
                child: Center(
                child: Container(
                  height: 300,
                  width: 350,
                  child: SfPyramidChart()
                )
               )
              )
            );
        }

    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: SfPyramidChart(
                    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.

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