How to rotate vertical-bar label decorators with flutter and (google) charts?

Question

I want to rotate the bar chart label decorators 90 degrees.

In my flutter app I draw a simple vertical bar chart of daily amounts (using charts_flutter 0.10.0) with labels on both a numeric y-axis and ordinal x-axis.

These axis labels can be styled and easily rotated using labelRotation. The vertical bars also each have 'bar label decorator' labels that show the exact graphed amount – but because of size constraints and resulting narrow bars, the label decorators overflow.

I need to rotate these bar decorator labels 90 degrees, so they run in the same direction as each bar's long axis, allowing the label text to fit – but cannot work out how.

Unlike for the axis labels of primaryMeasureAxis and domainAxis, which have a labelRotation property in their renderSpec, the bar label decorators don't seem to have any option other than simple text styling (fontFamily, fontSize, lineHeight, color, fontWeight) or label position behaviour via BarLabelDecorator.

My guess is that this isn't currently possible without an update to BarLabelDecorator to provide a rotate option. I am hoping I'm wrong!

Widget build(BuildContext context) {

  charts.NumericAxisSpec yAxisStyling = charts.NumericAxisSpec(
      renderSpec: charts.GridlineRendererSpec(
        labelStyle: charts.TextStyleSpec(
            fontSize: 12,
            color: charts.ColorUtil.fromDartColor(Colors.grey.shade500),
        ),
        lineStyle: new charts.LineStyleSpec(
            color: charts.ColorUtil.fromDartColor(Colors.grey.shade400)),
    )
  );

  charts.OrdinalAxisSpec xAxisStyling = charts.OrdinalAxisSpec(
    renderSpec: charts.GridlineRendererSpec(
      labelStyle: charts.TextStyleSpec(
        fontSize: 12,
        color: charts.ColorUtil.fromDartColor(Colors.grey.shade500),
      ),
      // labelRotation: 90, // <- just an example / don't need these rotated
      lineStyle: new charts.LineStyleSpec(color: charts.MaterialPalette.transparent),
    ),
    showAxisLine: false,  // doesn't seem to work on it's own - need above 'transparent' line
  );

  return new charts.BarChart(
    seriesList,
    animate: animate,
    vertical: true,
    // Set a bar label decorator.
    //          insideLabelStyleSpec: new charts.TextStyleSpec(),
    //          outsideLabelStyleSpec: new charts.TextStyleSpec(...)),
    barRendererDecorator: new charts.BarLabelDecorator<String>(), // <- ? no rotate property
    primaryMeasureAxis: yAxisStyling,
    domainAxis: xAxisStyling,
  );
}

djoll djoll · Accepted Answer · 2021-06-02T22:55:15

In case anyone else is looking...

Although there is (currently) no way to achieve this natively with the public release of the google charts flutter package, this answer to "Is there a way to put label text vertically in flutter charts_flutter: ^0.8.1" describes a workaround through custom extension of the BarRendererDecorator class.

The money-line is by ultimately rotating the direction of drawing text on the canvas:

canvas.drawText(labelElement, labelX, labelY, rotation: -math.pi / 2);

The complete solution is probably not the most maintainable (in terms of becoming technical debt as the charts package is inevitably updated), but it will do the job.

(In the mean-time I've decided against decorating the bars, and instead use a tap gesture to show custom tooltips on the bar value etc. Neater and less crowding of the UI, especially on small screens.)

How to rotate vertical-bar label decorators with flutter and (google) charts?

1 Answers