Vertical Axis Values are clipped in scrollable chart

[roly151]

I have a scrollable chart and want to show vertical axis values from index. However these are clipped as the size allowed for the value is too small for the value from index - unless I make the width of the chart really wide. The values in the chart image below should be 12am, 5am, 10am etc.

If I make the text smaller, it shows more of the values.

Or if I make the chart width really wide, then I can get more of the values showing.

But how can I get the values to show without making the chart really wide? If the verticalAxisStep is set, is it possible to allow the values to show past the allowed space without clipping them? (Hope that makes sense)

The code for this chart is:

Expanded(
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: SizedBox(
              width: 160 * SizeConfig.safeBlockHorizontal,
              height: widget.chartHeight,
              child: 
                  Chart(
                state: _chartState,
              ),
            ),
          ),
        ),

_chartState = ChartState.line(
      ChartData.fromList(
        temperatures.map((e) => BubbleValue<void>(e.toDouble())).toList(),
        axisMax: maxY,
        axisMin: minY,
      ),
      behaviour: const ChartBehaviour(
        isScrollable: true,
      ),
      backgroundDecorations: [
        GridDecoration(
          showVerticalValues: true,
          showHorizontalValues: false,
          verticalAxisStep: 5,
          gridColor: CustomColors.darkBlue.withOpacity(0),
          textStyle: const TextStyle(
            color: CustomColors.darkBlue,
            fontSize: 14,
          ),
          verticalAxisValueFromIndex: (index) {
            var now = DateTime.now();
            var midnight = DateTime(now.year, now.month, now.day);
            var time = DateFormat('h').format(midnight.add(
                  Duration(minutes: index.toInt() * 60),
                )) +
                DateFormat('a')
                    .format(midnight.add(
                      Duration(minutes: index.toInt() * 60),
                    ))
                    .toLowerCase();
            return time;
          },
        ),
      ],
      foregroundDecorations: [
        SparkLineDecoration(
          lineWidth: 2.0,
          gradient: lineColor(minY, maxY),
          smoothPoints: true,
        ),
      ],
    );

[lukaknezic]

Hey @roly151, thanks for report 😄

There was issue that text painter would cut off text on single item width. So even though you set step size to 5, text painter didn't take that into account.

Now that is fixed and text should also be centred as well. (You can change alignment)
You can find fix in this PR: #64

[itsJoKr]

Since there's no additional comments, and we have a fix I will close this.