Appearance customization in Flutter Pyramid Chart

18 Nov 20186 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 width and height on the parent widget.

DART

@override
    Widget build(BuildContext context) {
      final List<ChartData> chartData = [
            ChartData('Jan', 35),
            ChartData('Feb', 28),
            ChartData('Mar', 38),
            ChartData('Apr', 32),
            ChartData('May', 40)
        ];
        return Scaffold(
          body: Center(
            child: Container(
              height: 300,
              width: 350,
              child: SfPyramidChart(
                series: PyramidSeries<ChartData, String>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y)
               )
             )
           )
         );
        }
    class ChartData {
      ChartData(this.x, this.y);
      final String x;
      final double y;
    }

Chart margin

The chart margin can be specified using the margin property.

DART

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
            child: Container(
              child: SfPyramidChart(
                borderColor: Colors.red,
              borderWidth: 2,
              margin: EdgeInsets.all(15),
              series: PyramidSeries<ChartData, String>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y)
              )
            )
          )
      );
    }

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.

DART

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
            child: Container(
              height: 300, 
              width: 350, 
              child: SfPyramidChart(
                backgroundColor: Colors.lightGreen,
                backgroundImage: AssetImage('images/liveChart.png'),
                series: PyramidSeries<ChartData, String>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y,)
              )
            )
          )
        );
      }