fl_chart flutter - Y axis horizontal grid lines issue & x axis title width

196 Views Asked by At

In the below code i've set my y axis values from 0 to 5, i need the horizontal grid line to appear from 0 to 5 which means there would be 6 lines presented but i'm only getting 4 lines 0 and 5 were not appearing with the horizontal line issue might be in the gridData, and also i'm confused with the x axis title width if the text goes more means one overlaps another Please check out the attached images and take me out :) .

enter image description here

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:kancerx/gen/fonts.gen.dart';
import 'package:kancerx/presentation/theme/colors.dart';

class HomeChartWidget extends StatelessWidget {
  const HomeChartWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            blurRadius: 5,
            color: Color.fromRGBO(0, 0, 0, 0.25),
          )
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 16, left: 16, right: 16),
            child: Text(
              "Psychological Trend",
              style: Theme.of(context)
                  .textTheme
                  .headlineMedium
                  ?.copyWith(color: Colors.black),
            ),
          ),
          const SizedBox(height: 20),
          Expanded(
            child: Padding(
                padding: const EdgeInsets.all(14),
                child: BarChart(
                  BarChartData(
                    barTouchData: barTouchData,
                    alignment: BarChartAlignment.spaceAround,
                    gridData: gridData,
                    titlesData: titlesData,
                    borderData: borderData,
                    minY: 0,
                    maxY: 5,
                    barGroups: barGroups,
                  ),
                )),
          ),
        ],
      ),
    );
  }

  //
  BarTouchData get barTouchData => BarTouchData(enabled: false);

  //
  List<BarChartGroupData>? get barGroups => [
        BarChartGroupData(
          barsSpace: 10,
          x: 0, // Sunday
          barRods: [
            BarChartRodData(
              toY: 5,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(8),
                topRight: Radius.circular(8),
              ),
            ),
          ],
        ),
        BarChartGroupData(
          barsSpace: 2,
          x: 1, // Monday
          barRods: [
            BarChartRodData(
              toY: 3,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(8),
                topRight: Radius.circular(8),
              ),
            ),
          ],
        ),
        BarChartGroupData(
          barsSpace: 22,
          x: 2, // Tuesday
          barRods: [
            BarChartRodData(
              toY: 1,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(8),
                topRight: Radius.circular(8),
              ),
            ),
          ],
        ),
        BarChartGroupData(
          barsSpace: 2,
          x: 3, // Wednesday
          barRods: [
            BarChartRodData(
              toY: 5,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(8),
                topRight: Radius.circular(8),
              ),
            ),
          ],
        ),
        BarChartGroupData(
          x: 3, // Thursday
          barsSpace: 16,
          barRods: [
            BarChartRodData(
              toY: 2,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(8),
                topRight: Radius.circular(8),
              ),
            ),
          ],
        ),
        BarChartGroupData(
          barsSpace: 2,
          x: 5, // Friday
          barRods: [
            BarChartRodData(
              toY: 3,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(8),
                topRight: Radius.circular(8),
              ),
            ),
          ],
        ),
        BarChartGroupData(
          barsSpace: 2,
          x: 6, // Saturday
          barRods: [
            BarChartRodData(
              toY: 4,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(8),
                topRight: Radius.circular(8),
              ),
            ),
          ],
        ),
      ];

  // Over all border data
  FlBorderData get borderData => FlBorderData(
        show: false,
      );

  // X and Y axis grid data
  FlGridData get gridData => FlGridData(
      show: true,
      drawVerticalLine: false,
      drawHorizontalLine: true,
      horizontalInterval: 1,
      checkToShowHorizontalLine: (value) {
        return true;
      },
      getDrawingHorizontalLine: (double value) {
        return const FlLine(
          color: ColorsManager.parrotGreen,
          strokeWidth: 0.5,
        );
      });

  // X and Y axis titles data
  FlTitlesData get titlesData => FlTitlesData(
      show: true,
      topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
      rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
      leftTitles: AxisTitles(
          sideTitles: SideTitles(
              showTitles: true,
              reservedSize: 60,
              interval: 1,
              getTitlesWidget: (double value, TitleMeta meta) {
                return SideTitleWidget(
                  axisSide: meta.axisSide,
                  space: 1,
                  child: Text(getYAxisValues(value),
                      style: const TextStyle(
                          fontFamily: FontFamily.sFProText,
                          fontWeight: FontWeight.w400,
                          fontSize: 12,
                          color: ColorsManager.textGray)),
                );
              })),
      bottomTitles: AxisTitles(
          sideTitles: SideTitles(
        interval: 1,
        reservedSize: 32,
        showTitles: true,
        getTitlesWidget: (double value, TitleMeta meta) {
          return SideTitleWidget(
            axisSide: meta.axisSide,
            space: 1,
            child: Text(getXAxisValues(value),
                textAlign: TextAlign.center,
                style: const TextStyle(
                    fontFamily: FontFamily.sFProText,
                    fontWeight: FontWeight.w400,
                    fontSize: 12,
                    color: ColorsManager.textGray)),
          );
        },
      )));

  String getXAxisValues(double value) {
    switch (value.toInt()) {
      case 0:
        return '01\nSun';
      case 1:
        return '02\nMon';
      case 2:
        return '03\nTue';
      case 3:
        return '04\nWed';
      case 4:
        return '05\nThu';
      case 5:
        return '06\nFri';
      case 6:
        return '07\nSat';
      default:
        return '';
    }
  }

  String getYAxisValues(double value) {
    switch (value.toInt()) {
      case 0:
        return '';
      case 1:
        return 'Terrible';
      case 2:
        return 'Bad';
      case 3:
        return 'Better';
      case 4:
        return 'Great';
      case 5:
        return 'Amazing';
      default:
        return '';
    }
  }
}
0

There are 0 best solutions below