Flutter Charts
A chart is a graphical representation of data where data is represented by a symbol such as a line, bar, pie, etc. In Flutter we can add the fl_chart package.
Supported Chart Types in Flutter
fl_chart supports mainly three types of charts, and each chart comes with their own configuration options:
- Line Chart
- Bar Chart
- Pie and Donut Chart
Line Chart
A line chart is a graph that helps us create lines by connecting two coordinates.
We can use it as below:
LineChart( LineChartData( // write your logic ), );
Bar Chart
It is a graph that shows data using rectangular bars. These bars can be horizontal or vertical.
We can use it as below:
BarChart( BarChartData( // write your logic ), );
Pie or Donut Chart
It is a graph that is used to display the information in a circular graph.
We can use it as below:
PieChart( PieChartData( // write your logic ), );
Let us understand it with the help of an example.
Example
Add the fl_chart in the package.yaml file
dependencies: flutter: sdk: flutter fl_chart: ^0.10.1
After adding the dependency, click on the get packages link shown on the screen’s top left corner:
import 'package:flutter/material.dart'; import 'package:fl_chart/fl_chart.dart'; void main() => runApp(MyApp()); /// This Widget is the main application widget. class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter Chart Example'), backgroundColor: Colors.green ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ LineCharts(), Padding( padding: const EdgeInsets.all(16.0), child: Text( "Traffic Source Chart", style: TextStyle( fontSize: 20, color: Colors.purple, fontWeight: FontWeight.w700, fontStyle: FontStyle.italic ) ) ), ], ), ), ); } } class LineCharts extends StatelessWidget { @override Widget build(BuildContext context) { const cutOffYValue = 0.0; const yearTextStyle = TextStyle(fontSize: 12, color: Colors.black); return SizedBox( width: 360, height: 250, child: LineChart( LineChartData( lineTouchData: LineTouchData(enabled: false), lineBarsData: [ LineChartBarData( spots: [ FlSpot(0, 1), FlSpot(1, 1), FlSpot(2, 3), FlSpot(3, 4), FlSpot(3, 5), FlSpot(4, 4) ], isCurved: true, barWidth: 2, colors: [ Colors.black, ], belowBarData: BarAreaData( show: true, colors: [Colors.lightBlue.withOpacity(0.5)], cutOffY: cutOffYValue, applyCutOffY: true, ), aboveBarData: BarAreaData( show: true, colors: [Colors.lightGreen.withOpacity(0.5)], cutOffY: cutOffYValue, applyCutOffY: true, ), dotData: FlDotData( show: false, ), ), ], minY: 0, titlesData: FlTitlesData( bottomTitles: SideTitles( showTitles: true, reservedSize: 5, textStyle: yearTextStyle, getTitles: (value) { switch (value.toInt()) { case 0: return '2016'; case 1: return '2017'; case 2: return '2018'; case 3: return '2019'; case 4: return '2020'; default: return ''; } }), leftTitles: SideTitles( showTitles: true, getTitles: (value) { return '\$ ${value + 100}'; }, ), ), axisTitleData: FlAxisTitleData( leftTitle: AxisTitle(showTitle: true, titleText: 'Value', margin: 10), bottomTitle: AxisTitle( showTitle: true, margin: 10, titleText: 'Year', textStyle: yearTextStyle, textAlign: TextAlign.right)), gridData: FlGridData( show: true, checkToShowHorizontalLine: (double value) { return value == 1 || value == 2 || value == 3 || value == 4; }, ), ), ), ); } }