Feature/radar chart vertice label

example/lib/presentation/samples/chart_samples.dart

@@ -27,6 +27,7 @@ import 'pie/pie_chart_sample1.dart';
 import 'pie/pie_chart_sample2.dart';
 import 'pie/pie_chart_sample3.dart';
 import 'radar/radar_chart_sample1.dart';
+import 'radar/radar_chart_sample2.dart';
 import 'scatter/scatter_chart_sample1.dart';
 import 'scatter/scatter_chart_sample2.dart';
 
@@ -68,6 +69,7 @@ class ChartSamples {
     ],
     ChartType.radar: [
       RadarChartSample(1, (context) => RadarChartSample1()),
+      RadarChartSample(2, (context) => const RadarChartSample2()),
     ],
     ChartType.candlestick: [
       CandlestickChartSample(1, (context) => const CandlestickChartSample1()),

example/lib/presentation/samples/radar/radar_chart_sample2.dart

@@ -0,0 +1,113 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:fl_chart_app/presentation/resources/app_resources.dart';
+import 'package:flutter/material.dart';
+
+class RadarChartSample2 extends StatefulWidget {
+  const RadarChartSample2({super.key});
+
+  final List<SubjectScore> scores = const [
+    SubjectScore(subject: 'Social Studies', value: 80),
+    SubjectScore(subject: 'Math', value: 75),
+    SubjectScore(subject: 'English', value: 70),
+    SubjectScore(subject: 'Science', value: 65),
+    SubjectScore(subject: 'Art', value: 60),
+  ];
+
+  final double _maxPoint = 100;
+
+  @override
+  State<RadarChartSample2> createState() => _RadarChartSample2State();
+}
+
+class _RadarChartSample2State extends State<RadarChartSample2> {
+  @override
+  Widget build(BuildContext context) {
+    return AspectRatio(
+      aspectRatio: 1,
+      child: RadarChart(
+        RadarChartDataExtended(
+          dataSets: [
+            RadarDataSet(
+              dataEntries: widget.scores
+                  .map((score) => RadarEntry(value: score.value))
+                  .toList(),
+            ),
+            RadarDataSet(
+              dataEntries: List.generate(
+                widget.scores.length,
+                (index) => RadarEntry(value: widget._maxPoint),
+              ),
+              fillColor: Colors.transparent,
+              borderColor: Colors.transparent,
+            ),
+          ],
+          radarBackgroundColor: Colors.transparent,
+          borderData: FlBorderData(
+            show: true,
+            border: Border.all(color: AppColors.borderColor),
+          ),
+          radarBorderData: const BorderSide(
+            color: AppColors.borderColor,
+          ),
+          getTitle: (index, angle) {
+            return RadarChartTitle(
+              text: widget.scores[index].subject,
+              positionPercentageOffset: 0.1,
+            );
+          },
+          getVerticeLabel: (index) {
+            return RadarChartVertexLabel(
+              text: widget.scores[index].value.toInt().toString(),
+              offset: 0,
+            );
+          },
+          titlePositionPercentageOffset: 0.5,
+          verticeLabelTextStyle: const TextStyle(
+            color: AppColors.primary,
+          ),
+          tickBorderData: const BorderSide(
+            color: AppColors.mainGridLineColor,
+          ),
+          gridBorderData: const BorderSide(
+            color: AppColors.mainGridLineColor,
+          ),
+          tickCount: 4,
+          ticksTextStyle: const TextStyle(
+            color: Colors.transparent,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class RadarChartDataExtended extends RadarChartData {
+  RadarChartDataExtended({
+    required List<RadarDataSet> super.dataSets,
+    super.radarBackgroundColor,
+    super.borderData,
+    super.radarBorderData,
+    super.getTitle,
+    super.getVerticeLabel,
+    super.titleTextStyle,
+    super.titlePositionPercentageOffset,
+    super.verticeLabelTextStyle,
+    super.tickBorderData,
+    super.gridBorderData,
+    super.tickCount,
+    super.ticksTextStyle,
+  });
+
+  @override
+  RadarEntry get minEntry => super.maxEntry;
+}
+
+class SubjectScore {
+  const SubjectScore({
+    required this.subject,
+    required this.value,
+  });
+
+  final String subject;
+  final double value;
+}

lib/src/chart/radar_chart/radar_chart_data.dart

@@ -12,6 +12,10 @@ typedef GetTitleByIndexFunction = RadarChartTitle Function(
   double angle,
 );
 
+typedef GetVerticeLabelByIndexFunction = RadarChartVertexLabel Function(
+  int index,
+);
+
 enum RadarShape {
   circle,
   polygon,
@@ -41,6 +45,22 @@ class RadarChartTitle {
   final double? positionPercentageOffset;
 }
 
+/// Defines a label for [RadarChart] vertices
+class RadarChartVertexLabel {
+  const RadarChartVertexLabel({
+    required this.text,
+    this.offset,
+  });
+
+  /// [text] is used to draw labels on the vertices of [RadarChart]
+  final String text;
+
+  /// [offset] is the place of showing label on the [RadarChart] vertices
+  /// The higher the value of this field, the more labels move away from the chart vertices.
+  /// This value should be between 0 and 1
+  final double? offset;
+}
+
 /// [RadarChart] needs this class to render itself.
 ///
 /// It holds data needed to draw a radar chart,
@@ -67,7 +87,9 @@ class RadarChartData extends BaseChartData with EquatableMixin {
     BorderSide? radarBorderData,
     RadarShape? radarShape,
     this.getTitle,
+    this.getVerticeLabel,
     this.titleTextStyle,
+    this.verticeLabelTextStyle,
     double? titlePositionPercentageOffset,
     int? tickCount,
     this.ticksTextStyle,
@@ -130,9 +152,15 @@ class RadarChartData extends BaseChartData with EquatableMixin {
   /// ```
   final GetTitleByIndexFunction? getTitle;
 
+  /// [getVerticeLabel] is used to draw labels on the vertices of the [RadarChart]
+  final GetVerticeLabelByIndexFunction? getVerticeLabel;
+
   /// Defines style of showing [RadarChart] titles.
   final TextStyle? titleTextStyle;
 
+  /// Defines style of showing [RadarChart] vertice labels.
+  final TextStyle? verticeLabelTextStyle;
+
   /// the [titlePositionPercentageOffset] is the place of showing title on the [RadarChart]
   /// The higher the value of this field, the more titles move away from the chart.
   /// this field should be between 0 and 1,
@@ -198,7 +226,9 @@ class RadarChartData extends BaseChartData with EquatableMixin {
     BorderSide? radarBorderData,
     RadarShape? radarShape,
     GetTitleByIndexFunction? getTitle,
+    GetVerticeLabelByIndexFunction? getVerticeLabel,
     TextStyle? titleTextStyle,
+    TextStyle? verticeLabelTextStyle,
     double? titlePositionPercentageOffset,
     int? tickCount,
     TextStyle? ticksTextStyle,
@@ -214,7 +244,10 @@ class RadarChartData extends BaseChartData with EquatableMixin {
         radarBorderData: radarBorderData ?? this.radarBorderData,
         radarShape: radarShape ?? this.radarShape,
         getTitle: getTitle ?? this.getTitle,
+        getVerticeLabel: getVerticeLabel ?? this.getVerticeLabel,
         titleTextStyle: titleTextStyle ?? this.titleTextStyle,
+        verticeLabelTextStyle:
+            verticeLabelTextStyle ?? this.verticeLabelTextStyle,
         titlePositionPercentageOffset:
             titlePositionPercentageOffset ?? this.titlePositionPercentageOffset,
         tickCount: tickCount ?? this.tickCount,
@@ -235,7 +268,10 @@ class RadarChartData extends BaseChartData with EquatableMixin {
         radarBackgroundColor:
             Color.lerp(a.radarBackgroundColor, b.radarBackgroundColor, t),
         getTitle: b.getTitle,
+        getVerticeLabel: b.getVerticeLabel,
         titleTextStyle: TextStyle.lerp(a.titleTextStyle, b.titleTextStyle, t),
+        verticeLabelTextStyle:
+            TextStyle.lerp(a.verticeLabelTextStyle, b.verticeLabelTextStyle, t),
         titlePositionPercentageOffset: lerpDouble(
           a.titlePositionPercentageOffset,
           b.titlePositionPercentageOffset,
@@ -266,7 +302,9 @@ class RadarChartData extends BaseChartData with EquatableMixin {
         radarBorderData,
         radarShape,
         getTitle,
+        getVerticeLabel,
         titleTextStyle,
+        verticeLabelTextStyle,
         titlePositionPercentageOffset,
         tickCount,
         ticksTextStyle,

lib/src/chart/radar_chart/radar_chart_painter.dart

@@ -1,4 +1,4 @@
-import 'dart:math' show cos, min, pi, sin;
+import 'dart:math' show cos, min, pi, sin, sqrt;
 
 import 'package:fl_chart/fl_chart.dart';
 import 'package:fl_chart/src/chart/base/base_chart/base_chart_painter.dart';
@@ -66,6 +66,7 @@ class RadarChartPainter extends BaseChartPainter<RadarChartData> {
     drawTicks(context, canvasWrapper, holder);
     drawTitles(context, canvasWrapper, holder);
     drawDataSets(canvasWrapper, holder);
+    drawVerticeLabels(context, canvasWrapper, holder);
   }
 
   @visibleForTesting
@@ -338,6 +339,75 @@ class RadarChartPainter extends BaseChartPainter<RadarChartData> {
     }
   }
 
+  @visibleForTesting
+  /// Draws labels at each vertex of the [RadarChart].
+  void drawVerticeLabels(
+    BuildContext context,
+    CanvasWrapper canvasWrapper,
+    PaintHolder<RadarChartData> holder,
+  ) {
+    final data = holder.data;
+    if (data.getVerticeLabel == null) return;
+
+    dataSetsPosition ??= calculateDataSetsPosition(canvasWrapper.size, holder);
+    if (dataSetsPosition!.isEmpty) return;
+
+    final size = canvasWrapper.size;
+    final centerX = radarCenterX(size);
+    final centerY = radarCenterY(size);
+    final vertexPositions = dataSetsPosition![0].entriesOffset;
+
+    final style = Utils().getThemeAwareTextStyle(
+      context,
+      data.verticeLabelTextStyle,
+    );
+
+    _titleTextPaint
+      ..textAlign = TextAlign.center
+      ..textDirection = TextDirection.ltr
+      ..textScaler = holder.textScaler;
+
+    for (var index = 0; index < vertexPositions.length; index++) {
+      final verticeLabel = data.getVerticeLabel!(index);
+      final threshold = 1.0 + (verticeLabel.offset ?? 0.2);
+      final span = TextSpan(
+        text: verticeLabel.text,
+        style: style,
+      );
+      _titleTextPaint
+        ..text = span
+        ..layout();
+
+      // Get the vertex position from dataSetsPosition
+      final vertexOffset = vertexPositions[index];
+
+      final vectorX = vertexOffset.dx - centerX;
+      final vectorY = vertexOffset.dy - centerY;
+
+      final vectorLength = sqrt(vectorX * vectorX + vectorY * vectorY);
+
+      final normalizedX = vectorX / vectorLength * threshold;
+      final normalizedY = vectorY / vectorLength * threshold;
+
+      const labelOffset = 20.0;
+      final labelX = vertexOffset.dx + normalizedX * labelOffset;
+      final labelY = vertexOffset.dy + normalizedY * labelOffset;
+
+      final rect = Rect.fromLTWH(
+        labelX - _titleTextPaint.width / 2,
+        labelY - _titleTextPaint.height / 2,
+        _titleTextPaint.width,
+        _titleTextPaint.height,
+      );
+
+      canvasWrapper.drawText(
+        _titleTextPaint,
+        rect.topLeft,
+        0,
+      );
+    }
+  }
+
   @visibleForTesting
   void drawDataSets(
     CanvasWrapper canvasWrapper,