I am reading from a local Json file some values to be displayed on a chart using fl_chart package.
The problem that i have is that on the screen the bottonTitle data are a little cutted out. I cannot find out why this is happen!
To display the values on the chart i use the following code:
Column(
children: [
const Text(
'Open Force',
style: TextStyle(
color: AppColors.textColor1,
fontSize: 20.0,
letterSpacing: 2.0,
),
),
const SizedBox(
height: 10,
),
SizedBox(
width: 580,
height: 270,
child: LineChart(
LineChartData(
lineTouchData: LineTouchData(enabled: true),
lineBarsData: [
LineChartBarData(
isStrokeCapRound: false,
spots: gtxs1.flSpots3,
isCurved: true,
barWidth: 3,
color: const Color.fromARGB(255, 99, 175, 28),
dotData: FlDotData(
show: true,
getDotPainter: (spot, percent, barData, index) {
return FlDotCirclePainter(
radius: 4,
color: const Color.fromARGB(255, 151, 124, 124),
strokeColor: AppColors.chartColor1,
);
},
),
),
],
minY: 0,
titlesData: FlTitlesData(
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
interval: 1,
),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: AxisTitles(
axisNameWidget: const Text(
'Max',
textAlign: TextAlign.start,
style: TextStyle(
color: AppColors.textColor2,
fontSize: 16.0,
),
),
axisNameSize: 34,
sideTitles: SideTitles(
showTitles: true,
reservedSize: 0,
),
),
),
),
swapAnimationDuration: const Duration(milliseconds: 500),
//swapAnimationCurve: Curves.easeInOut,
swapAnimationCurve: Curves.linear,
),
),
],
),
You can try adjusting the reservedSize
parameter in SideTitles
.
SideTitles(
showTitles: true,
reservedSize: 30,
)
This is how I solved it.