add label inside bar chart (#1893)

alikhavarii13 · web-flow · commit b3ce63ae5ab9 · 2025-08-24T18:59:09.000+02:00
* add label inside bar chart

* fixed problems

* fixed some problems

* add label inside bar chart

* fixed problems

* fix rotation problem

* fix formatting

* add test for label feature
diff --git a/example/lib/presentation/samples/bar/bar_chart_sample5.dart b/example/lib/presentation/samples/bar/bar_chart_sample5.dart
@@ -170,7 +170,8 @@ class BarChartSample5State extends State<BarChartSample5> {
               0,
               value1,
               AppColors.contentColorGreen,
-              BorderSide(
+              label: isTouched ? 'A' : null,
+              borderSide: BorderSide(
                 color: Colors.white,
                 width: isTouched ? 2 : 0,
               ),
@@ -179,7 +180,8 @@ class BarChartSample5State extends State<BarChartSample5> {
               value1,
               value1 + value2,
               AppColors.contentColorYellow,
-              BorderSide(
+              label: isTouched ? 'B' : null,
+              borderSide: BorderSide(
                 color: Colors.white,
                 width: isTouched ? 2 : 0,
               ),
@@ -188,7 +190,8 @@ class BarChartSample5State extends State<BarChartSample5> {
               value1 + value2,
               value1 + value2 + value3,
               AppColors.contentColorPink,
-              BorderSide(
+              label: isTouched ? 'C' : null,
+              borderSide: BorderSide(
                 color: Colors.white,
                 width: isTouched ? 2 : 0,
               ),
@@ -197,7 +200,8 @@ class BarChartSample5State extends State<BarChartSample5> {
               value1 + value2 + value3,
               value1 + value2 + value3 + value4,
               AppColors.contentColorBlue,
-              BorderSide(
+              label: isTouched ? 'D' : null,
+              borderSide: BorderSide(
                 color: Colors.white,
                 width: isTouched ? 2 : 0,
               ),
@@ -223,28 +227,32 @@ class BarChartSample5State extends State<BarChartSample5> {
               -value1,
               AppColors.contentColorGreen.withValues(
                   alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
-              const BorderSide(color: Colors.transparent),
+              label: isTouched ? 'A' : null,
+              borderSide: const BorderSide(color: Colors.transparent),
             ),
             BarChartRodStackItem(
               -value1,
               -(value1 + value2),
               AppColors.contentColorYellow.withValues(
                   alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
-              const BorderSide(color: Colors.transparent),
+              label: isTouched ? 'B' : null,
+              borderSide: const BorderSide(color: Colors.transparent),
             ),
             BarChartRodStackItem(
               -(value1 + value2),
               -(value1 + value2 + value3),
               AppColors.contentColorPink.withValues(
                   alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
-              const BorderSide(color: Colors.transparent),
+              label: isTouched ? 'C' : null,
+              borderSide: const BorderSide(color: Colors.transparent),
             ),
             BarChartRodStackItem(
               -(value1 + value2 + value3),
               -(value1 + value2 + value3 + value4),
               AppColors.contentColorBlue.withValues(
                   alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
-              const BorderSide(color: Colors.transparent),
+              label: isTouched ? 'D' : null,
+              borderSide: const BorderSide(color: Colors.transparent),
             ),
           ],
         ),
diff --git a/lib/src/chart/bar_chart/bar_chart_data.dart b/lib/src/chart/bar_chart/bar_chart_data.dart
@@ -487,9 +487,13 @@ class BarChartRodStackItem with EquatableMixin {
   BarChartRodStackItem(
     this.fromY,
     this.toY,
-    this.color, [
+    this.color, {
+    this.label,
+    this.labelStyle,
     this.borderSide = Utils.defaultBorderSide,
-  ]);
+  });
+  final String? label;
+  final TextStyle? labelStyle;
 
   /// Renders a Stacked Chart section from [fromY]
   final double fromY;
@@ -509,13 +513,17 @@ class BarChartRodStackItem with EquatableMixin {
     double? fromY,
     double? toY,
     Color? color,
+    String? label,
+    TextStyle? labelStyle,
     BorderSide? borderSide,
   }) =>
       BarChartRodStackItem(
         fromY ?? this.fromY,
         toY ?? this.toY,
         color ?? this.color,
-        borderSide ?? this.borderSide,
+        label: label ?? this.label,
+        labelStyle: labelStyle ?? this.labelStyle,
+        borderSide: borderSide ?? this.borderSide,
       );
 
   /// Lerps a [BarChartRodStackItem] based on [t] value, check [Tween.lerp].
@@ -528,12 +536,14 @@ class BarChartRodStackItem with EquatableMixin {
         lerpDouble(a.fromY, b.fromY, t)!,
         lerpDouble(a.toY, b.toY, t)!,
         Color.lerp(a.color, b.color, t)!,
-        BorderSide.lerp(a.borderSide, b.borderSide, t),
+        label: b.label,
+        labelStyle: b.labelStyle,
+        borderSide: BorderSide.lerp(a.borderSide, b.borderSide, t),
       );
 
   /// Used for equality check, see [EquatableMixin].
   @override
-  List<Object?> get props => [fromY, toY, color, borderSide];
+  List<Object?> get props => [fromY, toY, color, label, labelStyle, borderSide];
 }
 
 /// Holds values to draw a rod in rear of the main rod.
@@ -713,7 +723,10 @@ class BarTouchTooltipData with EquatableMixin {
   /// [BarChart] shows a tooltip popup on top of rods automatically when touch happens,
   /// otherwise you can show it manually using [BarChartGroupData.showingTooltipIndicators].
   /// Tooltip shows on top of rods, with [getTooltipColor] as a background color.
-  /// You can set the corner radius using [tooltipBorderRadius],
+  /// You can set the corner radius using [tooltipRoundedRadius],
+  /// or if you need a custom border, you can use [tooltipBorderRadius].
+  /// Note that if both [tooltipRoundedRadius] and [tooltipBorderRadius] are set,
+  /// the value from [tooltipBorderRadius] will be used.
   /// If you want to have a padding inside the tooltip, fill [tooltipPadding],
   /// or If you want to have a bottom margin, set [tooltipMargin].
   /// Content of the tooltip will provide using [getTooltipItem] callback, you can override it
diff --git a/lib/src/chart/bar_chart/bar_chart_painter.dart b/lib/src/chart/bar_chart/bar_chart_painter.dart
@@ -320,6 +320,43 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
                 ..clipRect(rect)
                 ..drawRRect(barRRect, _barPaint)
                 ..restore();
+              if (stackItem.label != null) {
+                final textStyle = stackItem.labelStyle ??
+                    const TextStyle(
+                      color: Colors.white,
+                      fontSize: 12,
+                      fontWeight: FontWeight.bold,
+                    );
+
+                final labelText = stackItem.label!;
+                final textSpan = TextSpan(text: labelText, style: textStyle);
+                final textPainter = TextPainter(
+                  text: textSpan,
+                  textAlign: TextAlign.center,
+                  textDirection: TextDirection.ltr,
+                  textScaler: holder.textScaler,
+                )..layout();
+
+                // Calculate rotation
+                final rotation = -holder.data.rotationQuarterTurns * (pi / 2);
+                final centerX = x;
+                final centerY = (stackFromY + stackToY) / 2;
+
+                // Check if text fits vertically
+                final segmentHeight = (stackFromY - stackToY).abs();
+                if (textPainter.height < segmentHeight) {
+                  canvasWrapper
+                    ..save()
+                    ..translate(centerX, centerY)
+                    ..rotate(rotation)
+                    ..translate(
+                      -textPainter.width / 2,
+                      -textPainter.height / 2,
+                    );
+                  textPainter.paint(canvasWrapper.canvas, Offset.zero);
+                  canvasWrapper.restore();
+                }
+              }
 
               // draw border stroke for each stack item
               drawStackItemBorderStroke(
diff --git a/repo_files/documentations/bar_chart.md b/repo_files/documentations/bar_chart.md
@@ -77,6 +77,8 @@ enum values {`start`, `end`, `center`, `spaceEvenly`, `spaceAround`, `spaceBetwe
 |fromY|draw stack item from this value|null|
 |toY|draw stack item to this value|null|
 |color|color of the stack item|null|
+|label|optional text label for the stack item|null|
+|labelStyle|optional TextStyle for the label|null|
 |borderSide|draw border stroke for each stack item|null|
 
 ### BarTouchData ([read about touch handling](handle_touches.md))
diff --git a/test/chart/bar_chart/bar_chart_data_test.dart b/test/chart/bar_chart/bar_chart_data_test.dart
@@ -54,6 +54,8 @@ void main() {
         true,
       );
       expect(barChartRodStackItem1 == barChartRodStackItem2, false);
+      expect(barChartRodStackItem1 == barChartRodStackItem3, false);
+      expect(barChartRodStackItem2 == barChartRodStackItem4, false);
     });
 
     test('BackgroundBarChartRodData equality test', () {
diff --git a/test/chart/bar_chart/bar_chart_painter_test.dart b/test/chart/bar_chart/bar_chart_painter_test.dart
diff --git a/test/chart/data_pool.dart b/test/chart/data_pool.dart
