Search code examples
flutterdartfl-chart

Flutter FL_CHART, prevent highest value left title from being cut off

enter image description here

I'm using fl_chart to make a weekly graph, however I'm running into a problem. The top of my left title tile, number 4 in this case, is getting cut off. Increasing the container just makes the graph portion take all the size, adding an empty toptitle didn't work either.

        LineChart(   
              LineChartData(
                backgroundColor: Theme.of(context).colorScheme.primary,
                  minY: 0,
                  maxY: highestweek.toDouble(),
                  minX: spotData.isNotEmpty ? spotData.first.x : 0,
                  titlesData: FlTitlesData(
                    topTitles: AxisTitles(
                      sideTitles: SideTitles(),
                    ),
                    rightTitles: AxisTitles(
                      sideTitles: SideTitles(showTitles: false),
                    ),
                    bottomTitles: AxisTitles(
                      sideTitles: SideTitles(
                        showTitles: spotData.isNotEmpty,
                        reservedSize: 70,
                        interval: const Duration(days: 30)
                            .inMilliseconds
                            .toDouble(),
                        getTitlesWidget: bottomTitleWidgets,
                      ),
                    ),
                    leftTitles: AxisTitles(
                      sideTitles: SideTitles(
                        showTitles: spotData.isNotEmpty,
                        getTitlesWidget: leftTitleWidgets,
                        reservedSize: highestweek > 999 ? 40 : 20,
                      ),
                    ),
                  ),
                  gridData: FlGridData(
                    horizontalInterval:
                        const Duration(days: 30).inMilliseconds.toDouble(),
                    show: true,
                    getDrawingHorizontalLine: (value) {
                      return FlLine(
                        color: Theme.of(context).colorScheme.onPrimary,
                        strokeWidth: 1,
                      );
                    },
                    getDrawingVerticalLine: (value) {
                      return FlLine(
                        color: Theme.of(context).colorScheme.onPrimary,
                        strokeWidth: 1,
                      );
                    },
                  ),
                  borderData: FlBorderData(
                      show: true,
                      border: Border.all(
                          color: const Color(0xff37434d), width: 1)),
                  lineBarsData: [
                    LineChartBarData(
                        barWidth: 4.5,
                        isStrokeCapRound: true,
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                        ),
                        color: widget.habit.color,
                        spots: spotData)
                  ])),

Do you guys have any idea what can prevent this?

Solution

  • Setting an invisible widget & giving size to topTitles fixed it.

                        topTitles: AxisTitles(
                      sideTitles: SideTitles(
                        getTitlesWidget: (value, meta) => Container(),
                        showTitles: true,
                        reservedSize: 10,
                      ),
                    ),