How to create a bar graph in flutter

ohohabbydale at 11/17/2020

Hi, I followed this kind of code but my labels on the x-axis overlap. How to I rotate the labels? Please help :(

sureshmjoshi at 4/28/2020

Hi, I tried this code but I have error on 1. final charts.Color barColor; 2. List<charts.Series<AppDownloads, String>> = [...... import 'package:flutter/material.dart'; import 'package:charts_flutter/flutter.dart' as charts; import 'dart:math'; class ProgressPage extends StatefulWidget{ static const String routeName = "/progress"; ProgressPage(); @override _ProgressPageState createState() => _ProgressPageState(); } class _ProgressPageState extends State<ProgressPage>{ @override Widget build(BuildContext context) { return MaterialApp( title: 'Bar Graph Demo', debugShowCheckedModeBanner: false, home: BarGraphDemo(), theme: ThemeData( primaryColor: Colors.blue, ), ); } } class BarGraphDemo extends StatefulWidget { BarGraphDemo({Key key}) : super(key: key); @override _BarGraphDemoState createState() => _BarGraphDemoState(); } class _BarGraphDemoState extends State { List data; @override void initState() { super.initState(); data = [ AppDownloads( year: '2017', count: 178.1, //barColor: charts.ColorUtil.fromDartColor(Colors.red), ), AppDownloads( year: '2018', count: 205.4, //barColor: charts.ColorUtil.fromDartColor(Colors.blue), ), AppDownloads( year: '2019', count: 258.2, //barColor: charts.ColorUtil.fromDartColor(Colors.green), ), ]; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Bar Graph Demo'), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( height: 200, width: double.infinity, padding: const EdgeInsets.all(12), child: Card( child: MyBarChart(data), ), ), Padding( padding: const EdgeInsets.all(16.0), child: Center( child: Text( 'Number of Mobile App Downloads in past 3 years (Data Source: Statista)', textAlign: TextAlign.center, ), ), ), ], ), ); } } class MyBarChart extends StatelessWidget { final List data; MyBarChart(this.data); @override Widget build(BuildContext context) { List<charts.Series<AppDownloads, String>> = [ charts.Series( id: 'AppDownloads', data: data, domainFn: (AppDownloads downloads, _) => downloads.year, measureFn: (AppDownloads downloads, _) => downloads.count, //colorFn: (AppDownloads downloads, _) => downloads.barColor ) ]; return charts.BarChart( series, animate: true, barGroupingType: charts.BarGroupingType.groupedStacked, ); } } class AppDownloads { final String year; final double count; final charts.Color barColor; AppDownloads({ this.year, this.count, this.barColor, }); }

seven.srikanth at 5/6/2020

fixed now. Please check the project over there, https://github.com/srilovesflutter/flutterexamples/tree/master/bargraph