Overlapping labels, label alignment - add workaround to documentation

[atreeon]

There are quite a few open issues (or closed but regressed issues) that have problems with labels.

I found the best way to paint a label and change its rotation was with a custom painter using code similar to this.

Thought I'd add the workaround here and link to the other issues and perhaps ask for an update to the documentation. Note, I couldn't seem to get the text to overlay and have a higher 'z index' to appear over the top of the bar charts so I'm just putting the description next to it.

    return SideTitleWidget(
      axisSide: AxisSide.left,
      child: Container(
        width: 10,
        child: RotatedBox(
          quarterTurns: 3,
          child: CustomPaint(
            painter: MyCustomPainter(text: text, textStyle: style),
          ),
        ),
      ),
    );

class MyCustomPainter extends CustomPainter {
  final String text;
  final TextStyle textStyle;

  MyCustomPainter({super.repaint, required this.textStyle, required this.text});

  @override
  void paint(Canvas canvas, Size size) {
    const textStyle = TextStyle(
      color: Colors.black,
      fontSize: 20,
    );

    var textSpan = TextSpan(
      text: text,
      style: textStyle,
    );
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );
    textPainter.layout(
      minWidth: 0,
    );

    final offset = Offset(15, 30);
    textPainter.paint(canvas, offset);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

#1132 #1434 #922 #911

Note: it isn't 'perfect' as the gridlines and anything else is painted on top of the labels.