How to Create a Chart in Flutter

Mobile

How to Create a Chart in Flutter

Farihah Salsabila

January 8, 2022

Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang How to Create a Chart in Flutter. Chart adalah sebuah widget pada flutter yang digunakan untuk memudahkan pengguna dalam memahami dan menganalisis data.

● Bar Chart

Step 1. Tambahkan Dependencies

Tambahkan https://pub.dev/packages/fl_chart/install pada pubspec.yml

dependencies:
flutter:
sdk: flutter
fl_chart: ^0.40.6

Step 2. Import Dependencies

Tambahkan Import fl_chart pada barchart.dart seperti berikut

import ‘package:fl_chart/fl_chart.dart’;

Step 3. Tambahkan List BarChartGroupData

Tambahkan List BarChartGroupData dengan menambahkan code seperti berikut

List<BarChartGroupData> barChartGroupData = [
BarChartGroupData(x: 1, barRods: [
BarChartRodData(y: 5.5, colors: [Colors.black]),
]),
BarChartGroupData(x: 2, barRods: [
BarChartRodData(y: 12, colors: [Colors.black]),
]),
BarChartGroupData(x: 3, barRods: [
BarChartRodData(y: 8, colors: [Colors.black]),
]),
BarChartGroupData(x: 4, barRods: [
BarChartRodData(y: 11.4, colors: [Colors.black]),
]),
BarChartGroupData(x: 5, barRods: [
BarChartRodData(y: 5, colors: [Colors.black]),
]),
BarChartGroupData(x: 6, barRods: [
BarChartRodData(y: 14, colors: [Colors.black]),
]),
BarChartGroupData(x: 7, barRods: [
BarChartRodData(y: 10.5, colors: [Colors.black]),
]),
];

Step 4. Membuat Tampilan Chart

Buat tampilan chart dan tambahkan BarChartGroupData dengan menambahkan code seperti berikut

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Bar Chart Flutter’),
backgroundColor: Colors.black,
),
body: SafeArea(
child: Column(
children: [
Container(
padding: EdgeInsets.all(30),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width,
child: BarChart(BarChartData(
titlesData: FlTitlesData(
topTitles: SideTitles(showTitles: false),
rightTitles: SideTitles(showTitles: false),
bottomTitles: SideTitles(
showTitles: true,
getTitles: (value) {
switch (value.toInt()) {
case 1:
return ‘Mon’;
case 2:
return ‘Tues’;
case 3:
return ‘Wed’;
case 4:
return ‘Thu’;
case 5:
return ‘Fri’;
case 6:
return ‘Sat’;
case 7:
return ‘Sun’;
}
return ”;
},
),
leftTitles: SideTitles(
interval: 4,
showTitles: true,
getTitles: (value) {
if (value.toInt() == 0)
return ”;
else
return value.toInt().toString();
},
),
),
maxY: 16,
borderData: FlBorderData(show: false,),
barGroups: barChartGroupData,
)))
],
),
),
);
}

Hasil Run :

● Pie Chart

Step 1. Tambahkan Dependencies

Tambahkan https://pub.dev/packages/fl_chart/install pada pubspec.yml

dependencies:
flutter:
sdk: flutter
fl_chart: ^0.40.6

Step 2. Import Dependencies

Tambahkan Import fl_chart pada piechart.dart seperti berikut

import ‘package:fl_chart/fl_chart.dart’;

Step 3. Tambahkan List PieChartSectionData

Tambahkan List PieChartSectionData dengan menambahkan code seperti berikut

List<PieChartSectionData> getSectionData(double screenWidth) {
double radius = screenWidth / 3.5;
return [
PieChartSectionData(
value: 50,
title: ‘50%’,
radius: radius,
titleStyle: TextStyle(color: Colors.white),
color: Colors.blueAccent,
),
PieChartSectionData(
value: 35,
title: ‘35%’,
titleStyle: TextStyle(color: Colors.white),
radius: radius,
color: Colors.red,
),
PieChartSectionData(
value: 20,
title: ‘20%’,
radius: radius,
titleStyle: TextStyle(color: Colors.white),
color: Colors.green,
),
PieChartSectionData(
value: 25,
title: ‘25%’,
radius: radius,
titleStyle: TextStyle(color: Colors.white),
color: Colors.orangeAccent,
),
];
}

Step 4. Membuat Tampilan Chart

Buat tampilan chart dan tambahkan getSelectionData dengan menambahkan code seperti berikut

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Pie Chart Flutter’),
backgroundColor: Colors.green,
),
body: SafeArea(
child: Column(
children: [
Container(
padding: EdgeInsets.all(20),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width,
child: PieChart(
PieChartData(
centerSpaceRadius: 0,
borderData: FlBorderData(show: false),
sections: getSectionData(MediaQuery.of(context).size.width))),
),
],
),
),
);
}

Hasil Run :

● Line Chart

Step 1. Tambahkan Dependencies

Tambahkan https://pub.dev/packages/fl_chart/install pada pubspec.yml

dependencies:
flutter:
sdk: flutter
fl_chart: ^0.40.6

Step 2. Import Dependencies

Tambahkan Import fl_chart pada linechart.dart seperti berikut

import ‘package:fl_chart/fl_chart.dart’;

Step 3. Tambahkan List LineChartBarData

Tambahkan list linechartbardata dengan menambahkan code seperti berikut

List<LineChartBarData> lineChartBarData = [
LineChartBarData(
isCurved: true,
spots: [
FlSpot(1, 10),
FlSpot(2, 12),
FlSpot(3, 10),
FlSpot(4, 7),
FlSpot(5, 8),
FlSpot(6, 10),
]
)
];

Step 4. Membuat Tampilan Line Chart

Buat tampilan line chart dan tambahkan linechartbardata dengan menambahkan code seperti berikut

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Line Chart Flutter’),
backgroundColor: Colors.blue,
),
body: SafeArea(
child: Column(
children: [
Container(
padding: EdgeInsets.all(20),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width,
child: LineChart(
LineChartData(
minX: 1,
minY: 0,
maxX: 6,
maxY: 15,
lineBarsData: lineChartBarData,
),
)
)
],
),
),
);
}

Hasil Run :

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂