Made bar chart three horizontal

MrRoy121 · Dec 10, 2024 · de9d312 · de9d312
1 parent e22d134
commit de9d312
Show file tree

Hide file tree

Showing 2 changed files with 220 additions and 1 deletion.
diff --git a/example/lib/presentation/samples/bar/bar_chart_hori_sample3.dart b/example/lib/presentation/samples/bar/bar_chart_hori_sample3.dart
@@ -0,0 +1,217 @@
+import 'package:fl_chart_app/presentation/resources/app_resources.dart';
+import 'package:fl_chart_app/util/extensions/color_extensions.dart';
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+
+class _BarChart extends StatelessWidget {
+  const _BarChart();
+
+  @override
+  Widget build(BuildContext context) {
+    return BarChart(
+      isHorizontal: true,
+      BarChartData(
+        barTouchData: barTouchData,
+        titlesData: titlesData,
+        borderData: borderData,
+        barGroups: barGroups,
+        gridData: const FlGridData(show: false),
+        alignment: BarChartAlignment.spaceAround,
+        maxY: 20,
+      ),
+    );
+  }
+
+  BarTouchData get barTouchData => BarTouchData(
+        enabled: false,
+        touchTooltipData: BarTouchTooltipData(
+          getTooltipColor: (group) => Colors.transparent,
+          tooltipPadding: EdgeInsets.zero, rotateAngle: 270, //HERE MADE THE ROTATION OF THE TOOLTIP
+
+          tooltipMargin: 8,
+          getTooltipItem: (
+            BarChartGroupData group,
+            int groupIndex,
+            BarChartRodData rod,
+            int rodIndex,
+          ) {
+            return BarTooltipItem(
+              rod.toY.round().toString(),
+              const TextStyle(
+                color: AppColors.contentColorCyan,
+                fontWeight: FontWeight.bold,
+              ),
+            );
+          },
+        ),
+      );
+
+  Widget getTitles(double value, TitleMeta meta) {
+    final style = TextStyle(
+      color: AppColors.contentColorBlue.darken(20),
+      fontWeight: FontWeight.bold,
+      fontSize: 14,
+    );
+    String text;
+    switch (value.toInt()) {
+      case 0:
+        text = 'Mn';
+        break;
+      case 1:
+        text = 'Te';
+        break;
+      case 2:
+        text = 'Wd';
+        break;
+      case 3:
+        text = 'Tu';
+        break;
+      case 4:
+        text = 'Fr';
+        break;
+      case 5:
+        text = 'St';
+        break;
+      case 6:
+        text = 'Sn';
+        break;
+      default:
+        text = '';
+        break;
+    }
+    return SideTitleWidget(
+      axisSide: meta.axisSide,
+      space: 4,
+      child: Transform.rotate(
+          // THIS TO ROTATE ALL THE TEXT
+          angle: -1.5708,
+          child: Text(text, style: style)),
+    );
+  }
+
+  FlTitlesData get titlesData => FlTitlesData(
+        show: true,
+        bottomTitles: AxisTitles(
+          sideTitles: SideTitles(
+            showTitles: true,
+            reservedSize: 30,
+            getTitlesWidget: getTitles,
+          ),
+        ),
+        leftTitles: const AxisTitles(
+          sideTitles: SideTitles(showTitles: false),
+        ),
+        topTitles: const AxisTitles(
+          sideTitles: SideTitles(showTitles: false),
+        ),
+        rightTitles: const AxisTitles(
+          sideTitles: SideTitles(showTitles: false),
+        ),
+      );
+
+  FlBorderData get borderData => FlBorderData(
+        show: false,
+      );
+
+  LinearGradient get _barsGradient => LinearGradient(
+        colors: [
+          AppColors.contentColorBlue.darken(20),
+          AppColors.contentColorCyan,
+        ],
+        begin: Alignment.bottomCenter,
+        end: Alignment.topCenter,
+      );
+
+  List<BarChartGroupData> get barGroups => [
+        BarChartGroupData(
+          x: 0,
+          barRods: [
+            BarChartRodData(
+              toY: 8,
+              gradient: _barsGradient,
+            )
+          ],
+          showingTooltipIndicators: [0],
+        ),
+        BarChartGroupData(
+          x: 1,
+          barRods: [
+            BarChartRodData(
+              toY: 10,
+              gradient: _barsGradient,
+            )
+          ],
+          showingTooltipIndicators: [0],
+        ),
+        BarChartGroupData(
+          x: 2,
+          barRods: [
+            BarChartRodData(
+              toY: 14,
+              gradient: _barsGradient,
+            )
+          ],
+          showingTooltipIndicators: [0],
+        ),
+        BarChartGroupData(
+          x: 3,
+          barRods: [
+            BarChartRodData(
+              toY: 15,
+              gradient: _barsGradient,
+            )
+          ],
+          showingTooltipIndicators: [0],
+        ),
+        BarChartGroupData(
+          x: 4,
+          barRods: [
+            BarChartRodData(
+              toY: 13,
+              gradient: _barsGradient,
+            )
+          ],
+          showingTooltipIndicators: [0],
+        ),
+        BarChartGroupData(
+          x: 5,
+          barRods: [
+            BarChartRodData(
+              toY: 10,
+              gradient: _barsGradient,
+            )
+          ],
+          showingTooltipIndicators: [0],
+        ),
+        BarChartGroupData(
+          x: 6,
+          barRods: [
+            BarChartRodData(
+              toY: 16,
+              gradient: _barsGradient,
+            )
+          ],
+          showingTooltipIndicators: [0],
+        ),
+      ];
+}
+
+class BarChartHoriSample3 extends StatefulWidget {
+  const BarChartHoriSample3({super.key});
+
+  @override
+  State<StatefulWidget> createState() => BarChartHoriSample3State();
+}
+
+class BarChartHoriSample3State extends State<BarChartHoriSample3> {
+  @override
+  Widget build(BuildContext context) {
+    return const AspectRatio(
+      aspectRatio: 1.6,
+      child: Padding(
+        padding: EdgeInsets.symmetric(vertical: 10),
+        child: _BarChart(),
+      ),
+    );
+  }
+}
diff --git a/example/lib/presentation/samples/chart_samples.dart b/example/lib/presentation/samples/chart_samples.dart
@@ -2,6 +2,7 @@ import 'package:fl_chart_app/presentation/samples/bar/bar_chart_hori_sample1.dar
 import 'package:fl_chart_app/util/app_helper.dart';
 
 import 'bar/bar_chart_hori_sample2.dart';
+import 'bar/bar_chart_hori_sample3.dart';
 import 'bar/bar_chart_sample1.dart';
 import 'bar/bar_chart_sample2.dart';
 import 'bar/bar_chart_sample3.dart';
@@ -35,8 +36,9 @@ class ChartSamples {
       BarChartSample(1, false, (context) => BarChartSample1()),
       BarChartSample(1, true, (context) => BarChartHoriSample1()),
       BarChartSample(2, false, (context) => BarChartSample2()),
-      BarChartSample(2, false, (context) => BarChartHoriSample2()),
+      BarChartSample(2, true, (context) => BarChartHoriSample2()),
       BarChartSample(3,false,  (context) => const BarChartSample3()),
+      BarChartSample(3,true,  (context) => const BarChartHoriSample3()),
       BarChartSample(4,false, (context) => BarChartSample4()),
       BarChartSample(5,false,  (context) => const BarChartSample5()),
       BarChartSample(6, false, (context) => const BarChartSample6()),