1. Apa itu Chart

Chart pada Flutter adalah sebuah widget yang digunakan untuk menampilkan data dalam bentuk grafik atau diagram. Chart memungkinkan pengguna untuk dengan mudah memahami data yang kompleks dan memvisualisasikan data dalam bentuk yang mudah dibaca. Chart dapat digunakan untuk berbagai tujuan, seperti analisis data, pelacakan kinerja, pemantauan trend, dan banyak lagi.

Dalam Flutter, terdapat berbagai pustaka atau package yang menyediakan chart, salah satunya adalah Syncfusion Chart. Syncfusion Chart menyediakan berbagai jenis chart yang dapat digunakan untuk berbagai keperluan, seperti line chart, column chart, pie chart, dan banyak lagi. Selain itu, Syncfusion Chart juga menyediakan berbagai fitur kustomisasi untuk memperindah tampilan chart dan menyesuaikan tampilan chart dengan kebutuhan aplikasi.

Menambahkan Dependesi Syncfusion Chart

untuk Syncfusion Chart kita bisa menambahkannya pada terminal atau file pubspec.yaml

• Syncfusion Chart

flutter pub add syncfusion_flutter_charts

Atau kita bisa langsung menabahkan dependensinya pada file pubspec.yaml.

dependencies:
 flutter:
   sdk: flutter
 syncfusion_flutter_charts: ^20.4.51

• Import

Setelah dependensi ditambahkan, impor paket Syncfusion Chart ke dalam file dart Anda dengan menambahkan kode berikut:

import 'package:syncfusion_flutter_charts/charts.dart';

• Widget Chart

Buat widget chart dengan menambahkan kode berikut:

SfCartesianChart(
   // konfigurasi chart
),

• Konfigurasi Chart

Konfigurasi chart dengan menambahkan kode berikut:

SfCartesianChart(
 // Axis
 primaryXAxis: CategoryAxis(),
 // Series
 series: <ChartSeries>[
   LineSeries<SalesData, String>(
     dataSource: chartData,
     xValueMapper: (SalesData sales, _) => sales.year,
     yValueMapper: (SalesData sales, _) => sales.sales,
   ),
 ],
)

Di sini, kita menggunakan CategoryAxis sebagai primaryXAxis karena kita akan menampilkan data dalam kategori. Kemudian, kita menambahkan LineSeries ke dalam chart dengan menggunakan dataSource untuk menentukan data yang akan ditampilkan. xValueMapper digunakan untuk menentukan nilai sumbu X untuk setiap data, sedangkan yValueMapper digunakan untuk menentukan nilai sumbu Y.

5. Class Data

Selanjutnya Buat file baru dengan nama sales_data.dart dan membuat kelas data untuk menyimpan data yang akan ditampilkan pada chart:

class SalesData {
 SalesData(this.year, this.sales);
 final String year;
 final double sales;
}

6. Chart Data

Tambahkan data ke dalam chart dengan membuat daftar objek SalesData:

final List<SalesData> chartData = [
  SalesData('2016', 35),
  SalesData('2017', 28),
  SalesData('2018', 34),
  SalesData('2019', 32),
  SalesData('2020', 40),
  SalesData('2021', 45),
];

7. Kustomisasi Chart

Kustomisasi chart sesuai kebutuhan dengan menambahkan properti ke dalam widget chart. Contoh kustomisasi yang umum adalah:

• Menambahkan judul chart:

title: ChartTitle(text: 'Penjualan Tahunan'),

• Menambahkan label pada sumbu X dan Y:

primaryXAxis: CategoryAxis(title: AxisTitle(text: 'Tahun')),
primaryYAxis: NumericAxis(title: AxisTitle(text: 'Penjualan')),

• Mengubah warna dan ketebalan garis pada LineSeries:

legend: Legend(isVisible: true),

Berikut tampilannya