Issue in showing bottom titles and the plotted chart is not showing properly

[mahadevanil]

Here the bottom titles are moving apart when only 2 data is there. the below image is the chart i need as output

this is the response { "isSuccess": true, "errorOnFailure": "", "overviews": [ { "title": "Gross Profit %", "current": "Current", "target": "Target", "xAxis": { "label": [ "Jan 2024", "Feb 2024" ] }, "yAxis": { "label": "Gross Profit %" } } ], "data": [ { "current": [ 21.55, 23.29 ], "baseline": [ 0, 0 ] } ] }

`import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:get/get.dart';
import 'package:responsive_builder/responsive_builder.dart';
import '../../../utils/common_functions.dart';
import '../../../utils/constants.dart';
import '../../../utils/global_widgets/shimmer_widget.dart';
import '../../../utils/string_constants.dart';
import '../../../utils/styles/app_colors.dart';
import '../../../utils/styles/text_styles.dart';
import '../../sales_analysis/controllers/sales_analysis_controller.dart';

class GrossProfitLineChart extends GetView {
const GrossProfitLineChart({
required this.loading,
required this.leftTitle,
required this.bottomTitleList,
required this.data,
super.key,
});
final bool loading;
final String leftTitle;
final List bottomTitleList;
final List data;

@OverRide
Widget build(BuildContext context) {
return Container(
height: getValueForScreenType(
context: context,
mobile: 300,
tablet: 400,
desktop: Constants.height * .7,
),
// height: Constants.height * .7,
width: getValueForScreenType(
context: context,
mobile: Constants.width,
tablet: Constants.width,
desktop: Constants.width,
),
padding: const EdgeInsets.only(top: 20),
decoration: BoxDecoration(
color: AppColors.backgroundColor,
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: AppColors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 4,
offset: const Offset(0, 3),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: controller.isLoading
? MainAxisAlignment.start
: MainAxisAlignment.spaceEvenly,
children: [
//!-----------(Title)
Padding(
padding: EdgeInsets.symmetric(
horizontal: Constants.width * .015,
vertical: Constants.height * 0.025,
),
child: Kstyles().med(
size: getValueForScreenType(
context: context,
mobile: 10,
tablet: 12,
desktop: 15,
),
text: "${StringConst.grossProfit} %",
),
),
// Kstyles().bold14(text: "${StringConst.grossProfit} %"),
//!-----------(Space)
SizedBox(
height: Constants.height * .01,
),
const Divider(
height: 1,
color: AppColors.lightGrey,
),
//!-----------(Space)
SizedBox(
height: Constants.height * .04,
),

      loading
          ? const ShimmerList(
              rowCount: 7,
            )
          : _lineChart(context),
    ],
  ),
);

}

//Line chart section
Widget _lineChart(BuildContext context) {
return Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: Constants.width * .015,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
//!--------(Gross Profit % Text)
RotatedBox(
quarterTurns: 3,
child: Kstyles().bold14(
text: leftTitle,
color: AppColors.greyShade400,
),
),
//!--------(Line chart)
Expanded(
child: data.isNotEmpty
? LineChart(
mainData(context),
)
: const SizedBox(),
),
const Gap(30),
],
),
),
);
}

//LineChart widget
LineChartData mainData(BuildContext context) {
return LineChartData(
lineTouchData: tooltipWidget(),
gridData: FlGridData(
show: true,
drawVerticalLine: false,
drawHorizontalLine: true,
horizontalInterval:
adjustValueForGraph(getMaxFromList(data)).toDouble() /
6.0, //------------- build 6 line for graph within the max value
verticalInterval: 1,
getDrawingHorizontalLine: () {
return const FlLine(
color: AppColors.black,
strokeWidth: 1,
);
},
),
titlesData: titleData(context),
borderData: FlBorderData(
show: true,
border: const Border.symmetric(
horizontal: BorderSide(
color: AppColors.black,
width: 1,
),
),
),
minX: 0,
minY: 0,
maxY: adjustValueForGraph(getMaxFromList(data)).toDouble(),
lineBarsData: [
lineChartBarWidget(),
],
);
}

//tooltip widget
LineTouchData _tooltipWidget() {
return LineTouchData(
getTouchedSpotIndicator:
(LineChartBarData barData, List spotIndexes) {
return spotIndexes.map((int spotIndex) {
return const TouchedSpotIndicatorData(
FlLine(
color: AppColors.transparent,
strokeWidth: 10,
),
FlDotData(
show: true,
),
);
}).toList();
},
touchTooltipData: LineTouchTooltipData(
tooltipBgColor: AppColors.black,
tooltipPadding: const EdgeInsets.all(5),
tooltipMargin: 10,
getTooltipItems: (List touchedBarSpots) {
return touchedBarSpots.map((LineBarSpot barSpot) {
final LineBarSpot flSpot = barSpot;
// String value = convertToFormattedUnits(flSpot.y.toString());
return LineTooltipItem(
'${bottomTitleList[flSpot.x.toInt()]}\n\nCurrent: ${flSpot.y}%',
const TextStyle(
color: AppColors.white,
fontWeight: FontWeight.bold,
fontSize: 14),
);
}).toList();
},
),
touchCallback: (FlTouchEvent val, LineTouchResponse? touchResponse) {},
handleBuiltInTouches: true,
);
}

//Line chart bar
LineChartBarData lineChartBarWidget() {
return LineChartBarData(
spots: [
...List.generate(
data.length,
(int index) => FlSpot(
index == 0 ? (index.toDouble() + 0.15) : index.toDouble(),
data[index].toDouble().toPrecision(2),
),
),
],
isCurved: false,
gradient: LinearGradient(
colors: [
AppColors.primaryColor,
AppColors.primaryColor,
],
),
barWidth: 3,
isStrokeCapRound: true,
dotData: const FlDotData(
show: true,
),
belowBarData: BarAreaData(
show: false,
),
);
}

//Title data
FlTitlesData titleData(BuildContext context) {
return FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: _getTitles,
reservedSize: getValueForScreenType(
context: context,
mobile: 80,
tablet: 80,
desktop: 100,
),
interval: 1,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
reservedSize: 50,
showTitles: true,
interval: adjustValueForGraph(getMaxFromList(data)).toDouble() /
6.0, //------------- build 6 line for graph within the max value
),
),
topTitles: const AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
rightTitles: const AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
);
}

//bottom title text
Widget _getTitles(double value, TitleMeta meta) {
return ResponsiveBuilder(
builder: (
BuildContext context,
SizingInformation sizingInformation,
) {
if (sizingInformation.deviceScreenType == DeviceScreenType.desktop) {
return _bottomTitle(
meta,
Padding(
padding: const EdgeInsets.only(
// left: value.toInt() == 0
// ? getValueForScreenType(
// context: Get.context!,
// mobile: 0,
// tablet: 0,
// desktop: 60,
// )
// : 0,
top: 10,
),
child: Kstyles().bold(
size: getValueForScreenType(
context: context,
mobile: 10,
tablet: 12,
desktop: 14,
),
color: AppColors.greyShade300,
text: bottomTitleList[value.toInt()],
),
),
bottomTitleList.length > 10 ? 112 : 0);
} else {
return _bottomTitle(
meta,
Padding(
padding: const EdgeInsets.only(
// left: value.toInt() == 0
// ? getValueForScreenType(
// context: Get.context!,
// mobile: 0,
// tablet: 0,
// desktop: 60,
// )
// : 0,
top: 10,
),
child: Kstyles().bold(
size: getValueForScreenType(
context: context,
mobile: 10,
tablet: 12,
desktop: 14,
),
color: AppColors.greyShade300,
text: bottomTitleList[value.toInt()],
),
),
112);
}
},
);
}

//bottom title widget
Widget _bottomTitle(
TitleMeta meta,
Widget text,
double angle,
) {
return SideTitleWidget(
axisSide: meta.axisSide,
angle: angle,
space: 10,
child: text,
);
}
}
`