Irfan Ganatra
Irfan Ganatra

Reputation: 1346

how to show piechart with grey colour circle instead of empty when data is null in flutter

I am creating a chartWidget with the use of fl_chart package,

if chart's data is empty its showing empty...but

I want it to show grey circle with the same size when chart's data is empty...like my attached image

here is my chart widget

class ChartWidget extends StatelessWidget {
  final Map<String, dynamic> mapdata;

  const ChartWidget({super.key, required this.mapdata});

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(20),
        child: PieChart(
            PieChartData(
                sectionsSpace: 4,
                centerSpaceRadius: 50,
                sections: mapdata.entries
                    .map((e) => PieChartSectionData(
                    title: e.key.toString(), value: (e.value)))
                    .toList()))
    );
  }

}

homescreen

class HomeScreen extends StatelessWidget {
   HomeScreen({Key? key}) : super(key: key);


  Map<String,dynamic> expenseData={
    'Food':3000.0,
    'Medicine':4000.0,
    'Others':800.0
  };
  Map<String,dynamic> incomeData={};//here income data is empty

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
        Expanded(child: ChartWidget(mapdata: expenseData,)),
        Expanded(child: ChartWidget(mapdata: incomeData,)),
      ],),
    );
  }
}

enter image description here

Upvotes: 2

Views: 383

Answers (1)

eamirho3ein
eamirho3ein

Reputation: 17900

Try this:

sections: mapdata.isEmpty
                  ? [PieChartSectionData(color: Colors.grey)]
                  : mapdata.entries
                      .map((e) => PieChartSectionData(
                          title: e.key.toString(), value: (e.value)))
                      .toList(),

enter image description here

enter image description here

Upvotes: 3

Related Questions