Radar Chart: No rotated titles

[ciriousjoker]

Is your feature request relasted to a problem? Please describe.
The bottom titles of the radar chart are hard to read since they're upside down.

Describe the solution you'd like
I'd like display custom widgets as titles. This would be cool:

displayTitle: (index) => Text(index),

That way we could also add icons above the titles and rotate them ourselves if needed by calculating 360/index.

Describe alternatives you've considered
Alternative charts could be used, but at the cost of custom code or more dependencies.

Additional context
Add any other context or screenshots about the feature request here.

[imaNNeo]

Hi.
Unfortunately, we don't support custom widgets inside our charts.
But we can add a rotation property to texts to customize the rotation.

[ciriousjoker]

That would be great! Our project would potentially need this in roughly 2 months (assuming we're using radar charts, the feature is still in the planning phase). If we end up needing this feature and it isn't there yet, are you open to PRs?

[imaNNeo]

We are always open to PRs.
Start by reading our contributing guide.

[arrmani88]

Thanks for this wonderful package.
Same here, the text at the bottom of the chart looks upside down so you can't read it.
Thanks again.

[FlorianArnould]

Hello everyone,

I'm taking a look on this but I'm not sure of what should be the default behavior :
I have multiple propositions and you can propose something else too.

Here these examples use degrees as angle unit but it could be radians too.

	Solution 1 (doesn't change the behavior but weird)	Solution 2 (changes the behavior but more natural)
Title model	@immutable class RadarChartTitle { final String text; final double additionalAngle; const RadarChartTitle({required this.text, this.additionalAngle = 0}); }	@immutable class RadarChartTitle { final String text; final double rotateAngle; const RadarChartTitle({required this.text, this.rotateAngle = 0}); }
	RadarChart( RadarChartData( ..., getTitle: (index) { const angle = 360.0 / 6; return RadarChartTitle( text: titles[index] ?? '', additionalAngle: -angle * index, ); }, ), )	RadarChart( RadarChartData( ..., getTitle: (index) { return RadarChartTitle(text: titles[index] ?? ''); },a A ), )
	RadarChart( RadarChartData( ..., getTitle: (index) { return RadarChartTitle(text: titles[index] ?? ''); }, ), )	RadarChart( RadarChartData( ..., getTitle: (index) { const angle = 360.0 / 6; return RadarChartTitle( text: titles[index] ?? '', rotateAngle: angle * index, ); }, ), )

@imaNNeoFighT which one do you prefer ?

[imaNNeo]

Hi @FlorianArnould. Thanks for writing your propositions.
Here is my suggestion:

RadarChart(
  RadarChartData(
    ...,
    getTitle: (int index, double angle) {
      /// angle is something like (360.0 / 6) * index which is provided by the library.

      /// Now we can manipulate the angle, for example, we can find the tangent angle to show rotated titles, or we can pass always 0 to have a horizontal title.
      return RadarChartTitle(text: titles[index] ?? '', angle: angle);
    },
  ),
)

[FlorianArnould]

Hi again @imaNNeoFighT,
I found this TODO in the code :
https://github.com/imaNNeoFighT/fl_chart/blob/b0913d648e58576677e87033d15ca4ae8bae5454/lib/src/chart/radar_chart/radar_chart_painter.dart#L225-L234
Is something like this enough to remove it as drawText is implemented with a drawRotated when you provide a the third arg rotateAngle

canvasWrapper.translate(featureOffset.dx, featureOffset.dy);

canvasWrapper.drawText(
  _titleTextPaint,
  Offset.zero -
      Offset(_titleTextPaint.width / 2, _titleTextPaint.height / 2),
  title.angle,
);
canvasWrapper.restore();

[imaNNeo]

You need to remove canvasWrapper.rotate() too.
I remembered that I have an open merge request to allow set a margin for titles here #1049
I refactored this rotated section in my PR. You can copy my code to use it in your repo. I will rebase my branch after that.

[FlorianArnould]

Thanks I will take this piece of code then 😉

[imaNNeo]

This feature has just landed in 0.55.0.
Thanks, @FlorianArnould for contributing!