flutterfl-chart

Flutter fl_chart bottomTitles are cutted out and not displayed correctly


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!

See Photo: enter image description here

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,
                                                      ),
                                                    ),
                                                  ],
                                                ),

Solution

  • You can try adjusting the reservedSize parameter in SideTitles.

    SideTitles(
        showTitles: true,
        reservedSize: 30, 
    )
    

    This is how I solved it.