Customised Bar Chart (FL Chart)

constants.dart

enum ChartType { day, week, month, quarter, year }

class AppConstants {
  static const String platformName = "GetTreasure Pro";
  static const String privacyUrl =
      "https://treasure-core-ui.vercel.app/privacy?hideNav=true";
  static const String termsUrl =
      "https://treasure-core-ui.vercel.app/terms?hideNav=true";

  // Sample Data for transactions
  static const List<double> chartData0 = [
    9000,
    4000,
    2000,
    7000,
    5000,
    7000,
    3000,
    10000,
    2000,
    4000,
    6000,
    7000
  ];
  static const List<double> chartData1 = [
    3000,
    4000,
    7000,
    10000,
    5000,
    4000,
    2000
  ];
  static const List<double> chartData2 = [3000, 4000, 7000, 10000];
  static const List<double> chartData3 = [3000, 6000, 5000, 4000];
  static const List<double> chartData4 = [
    3000,
    4000,
    7000,
    10000,
    5000,
    4000,
    2000,
    8000,
    2000,
    6000,
    3000,
    6000
  ];
}

custom_bar_chart.dart

import 'package:fl_chart/fl_chart.dart';  // fl_chart: ^0.41.0
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:treasure_pro/src/utils/colors.dart';
import 'package:treasure_pro/src/utils/constant.dart';

class CustomBarChart extends StatelessWidget {
  final List<double> data;
  final DateTime startDate;
  final ChartType range;
  CustomBarChart(
      {Key? key,
      required this.data,
      required this.startDate,
      required this.range})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Extractc transaction data into BarChartGroupData model
    List<BarChartGroupData> seriesList = _createSeriesData(data);

    return BarChart(
      BarChartData(
        gridData: FlGridData(
          drawVerticalLine: false,
          getDrawingHorizontalLine: (_) => FlLine(strokeWidth: 0.1),
        ),
        borderData: FlBorderData(
          border: const Border(
            top: BorderSide(width: 0.1),
            right: BorderSide.none,
            left: BorderSide.none,
            bottom: BorderSide(width: 0.1),
          ),
        ),
        groupsSpace: 10,
        titlesData: FlTitlesData(
          rightTitles: SideTitles(showTitles: false),
          topTitles: SideTitles(showTitles: false),
          leftTitles: SideTitles(
            showTitles: true,
            reservedSize: 40,
            getTextStyles: (context, value) =>
                const TextStyle(color: Color(0xff939393), fontSize: 10),
            margin: 0,
            getTitles: (double value) => NumberFormat('#,###').format(value),
          ),
          bottomTitles: SideTitles(
            showTitles: true,
            getTextStyles: (context, value) =>
                const TextStyle(color: Color(0xff939393), fontSize: 10),
            rotateAngle: ((range == ChartType.day || range == ChartType.year) &&
                    data.length > 6)
                ? 45
                : 0,
            getTitles: (double value) {
              int v = value.toInt() - 1;
              switch (range) {
                case ChartType.day:
                  return DateFormat("ha")
                      .format(
                        startDate.add(Duration(hours: v * 2)),
                      )
                      .toLowerCase();
                case ChartType.week:
                  return DateFormat("E").format(
                    startDate.add(Duration(days: v)),
                  );
                case ChartType.month:
                  return "Week ${value.toInt()}";

                case ChartType.quarter:
                  var a = DateFormat("MMM").format(
                    DateTime(startDate.year, startDate.month + v * 3),
                  );
                  var b = DateFormat("MMM").format(
                    DateTime(startDate.year, startDate.month + (v * 3) + 2),
                  );
                  return "$a - $b";
                case ChartType.year:
                  return DateFormat("MMM").format(
                    DateTime(startDate.year, startDate.month + v),
                  );

                default:
                  return "${value.toInt()}";
              }
            },
          ),
        ),
        barGroups: seriesList,
      ),
    );
  }

  static List<BarChartGroupData> _createSeriesData(List<double> data) {
    List<BarChartGroupData> barChartGroupDataList = <BarChartGroupData>[];
    for (var i = 0; i < data.length; i++) {
      barChartGroupDataList.add(
        BarChartGroupData(x: i + 1, barRods: [
          BarChartRodData(
              y: data[i], width: 12, colors: [AppColors.secondaryColor]),
        ]),
      );
    }
    return barChartGroupDataList;
  }
}

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  late List<double> selectedData = AppConstants.chartData0;
  late ChartType selectedRange = ChartType.day;
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: CustomBarChart(
                    data: selectedData,
                    startDate: DateTime.now(),
                    range: selectedRange,
                ),
            ),
        ),
    );
  }
}