axisNameWidget not centered based on axis/chart height

[valentinkatic]

I am using a simple bar chart with a leftTitles configuration that includes an axisNameWidget.

The title configuration is as follows:

AxisTitles(
  axisNameWidget: Text(
      axisTitle,
      style: axisTitleTextStyle,
  ),
  ...
)

Expected Behavior: I expected the axisNameWidget (the axis name) to be centered relative to the axis/chart height.

Actual Behavior: The axisNameWidget is centered based on the full chart height, which includes:

• The chart itself
• Bottom side titles
• Bottom axis name

As a result, the axis title (as shown in the screenshot) is positioned between the values 20-40, whereas the expected position is between 40-60 (center of the chart).

EDIT: The same issue occurs on the other axis where the title "Months" is positioned between March and April. However, since the center label is April, the expected title position should be directly below April.

Screenshot:

[ksdhans]

I just encountered this too, and was hoping that there was a workaround somewhere.

[ksdhans]

You can use a Transform.translate() wrapper to offset by half the bottom reserved area. For example:

axisNameWidget: Transform.translate(
  offset: const Offset(bottomReserved / 2, 0),
  child: Text( 
    "Axis Title",
  ),
),`

Of course, that's going to look bad as soon as they fix this bug. But, it works for now.