Horizontal Bar Charts
Step 1:
We cannot directly remove the time stamp from Horizontal Bar Charts but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code
dependencies: flutter: sdk: flutter charts_flutter: ^0.9.0
flutter pub get
import 'dart:math'; import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart'; import 'dart:math'; import 'package:charts_flutter/flutter.dart' as charts; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: Charts() ) ) ); } } class Charts extends StatefulWidget { // Charts() : super(); final String title = "Charts Demo"; @override ChartsState createState() => ChartsState(); } class ChartsState extends State<Charts> { // List<charts.Series> seriesList; static List<charts.Series<Sales, String>> _createRandomData() { final random = Random(); final desktopSalesData = [ Sales('2016', random.nextInt(100)), Sales('2017', random.nextInt(50)), Sales('2018', random.nextInt(40)), Sales('2019', random.nextInt(50)), Sales('2020', random.nextInt(100)), ]; final tabletSalesData = [ Sales('2016', random.nextInt(100)), Sales('2017', random.nextInt(100)), Sales('2018', random.nextInt(100)), Sales('2019', random.nextInt(100)), Sales('2020', random.nextInt(100)), ]; final mobileSalesData = [ Sales('2016', random.nextInt(100)), Sales('2017', random.nextInt(50)), Sales('2018', random.nextInt(100)), Sales('2019', random.nextInt(100)), Sales('2020', random.nextInt(120)), ]; return [ charts.Series<Sales, String>( id: 'Sales', domainFn: (Sales sales, _) => sales.year, measureFn: (Sales sales, _) => sales.sales, data: desktopSalesData, fillColorFn: (Sales sales, _) { return charts.MaterialPalette.deepOrange.shadeDefault; }, ), charts.Series<Sales, String>( id: 'Sales', domainFn: (Sales sales, _) => sales.year, measureFn: (Sales sales, _) => sales.sales, data: tabletSalesData, fillColorFn: (Sales sales, _) { return charts.MaterialPalette.pink.shadeDefault; }, ), charts.Series<Sales, String>( id: 'Sales', domainFn: (Sales sales, _) => sales.year, measureFn: (Sales sales, _) => sales.sales, data: mobileSalesData, fillColorFn: (Sales sales, _) { return charts.MaterialPalette.indigo.shadeDefault; }, ) ]; } barChart() { return charts.BarChart( seriesList, animate: true, vertical: false, barGroupingType: charts.BarGroupingType.grouped, defaultRenderer: charts.BarRendererConfig( groupingType: charts.BarGroupingType.grouped, strokeWidthPx: 4.0, ), domainAxis: charts.OrdinalAxisSpec( renderSpec: charts.NoneRenderSpec(), ), ); } @override void initState() { super.initState(); seriesList = _createRandomData(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: Icon(Icons.menu), backgroundColor: Colors.red, title: Text(widget.title), ), body: Container( padding: EdgeInsets.all(15.0), child: barChart(), ), ); } } class Sales { final String year; final int sales; Sales(this.year, this.sales); }