How To: Draw Charts Using fl_chart in Flutter

Haris Bin Nasir Avatar

·

·

Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart are all supported by fl_chart, a highly customisable Flutter chart library.

This post demonstrates how to create basic bar charts in Flutter

using fl chart, one of the most widely used chart plugins today.

Install fl_chart plugin into Flutter

Copied!
flutter pub add fl_chart flutter pub get

Import fl_chart

Copied!
import 'package:fl_chart/fl_chart.dart';

Draw Simple Bar Chart

Copied!
Scaffold( appBar: AppBar( title: const Text('KindaCode.com'), ), body: Padding( padding: const EdgeInsets.all(30), child: BarChart(BarChartData( borderData: FlBorderData( border: const Border( top: BorderSide.none, right: BorderSide.none, left: BorderSide(width: 1), bottom: BorderSide(width: 1), )), groupsSpace: 10, barGroups: [ BarChartGroupData(x: 1, barRods: [ BarChartRodData(y: 10, width: 15, colors: [Colors.amber]), ]), BarChartGroupData(x: 2, barRods: [ BarChartRodData(y: 9, width: 15, colors: [Colors.amber]), ]), BarChartGroupData(x: 3, barRods: [ BarChartRodData(y: 4, width: 15, colors: [Colors.amber]), ]), BarChartGroupData(x: 4, barRods: [ BarChartRodData(y: 2, width: 15, colors: [Colors.amber]), ]), BarChartGroupData(x: 5, barRods: [ BarChartRodData(y: 13, width: 15, colors: [Colors.amber]), ]), BarChartGroupData(x: 6, barRods: [ BarChartRodData(y: 17, width: 15, colors: [Colors.amber]), ]), BarChartGroupData(x: 7, barRods: [ BarChartRodData(y: 19, width: 15, colors: [Colors.amber]), ]), BarChartGroupData(x: 8, barRods: [ BarChartRodData(y: 21, width: 15, colors: [Colors.amber]), ]), ])), ), );

Draw Bar Chart Using Dynamic Data

A bar chart rendered using dynamic data is displayed in this example.

Copied!
// main.dart import 'package:flutter/material.dart'; import 'dart:math'; import 'package:fl_chart/fl_chart.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'KindaCode.com', theme: ThemeData( primarySwatch: Colors.indigo, ), home: HomePage(), ); } } // Define data structure for a bar group class DataItem { int x; double y1; double y2; double y3; DataItem( {required this.x, required this.y1, required this.y2, required this.y3}); } class HomePage extends StatelessWidget { HomePage({Key? key}) : super(key: key); // Generate dummy data to feed the chart final List<DataItem> _myData = List.generate( 30, (index) => DataItem( x: index, y1: Random().nextInt(20) + Random().nextDouble(), y2: Random().nextInt(20) + Random().nextDouble(), y3: Random().nextInt(20) + Random().nextDouble(), )); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('KindaCode.com'), ), body: Padding( padding: const EdgeInsets.all(20), child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: SizedBox( width: 3000, child: BarChart(BarChartData( borderData: FlBorderData( border: const Border( top: BorderSide.none, right: BorderSide.none, left: BorderSide(width: 1), bottom: BorderSide(width: 1), )), groupsSpace: 10, barGroups: _myData .map((dataItem) => BarChartGroupData(x: dataItem.x, barRods: [ BarChartRodData( y: dataItem.y1, width: 15, colors: [Colors.amber]), BarChartRodData( y: dataItem.y2, width: 15, colors: [Colors.red]), BarChartRodData( y: dataItem.y3, width: 15, colors: [Colors.blue]), ])) .toList())), ), ), ), ); } }

Conclusion

In this article, with the aid of fl chart plugin, we’ve gone over a few instances of using attractive and useful bar charts in Flutter apps. As always, If you have found this article useful do not forget to share it and leave a comment if you have any questions. Happy Coding

Leave a Reply

Your email address will not be published. Required fields are marked *