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 :) .
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 '';
}
}
}
