diff --git a/example/lib/presentation/samples/bar/bar_chart_hori_sample3.dart b/example/lib/presentation/samples/bar/bar_chart_hori_sample3.dart new file mode 100644 index 000000000..2ac2978cc --- /dev/null +++ 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 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 createState() => BarChartHoriSample3State(); +} + +class BarChartHoriSample3State extends State { + @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 index 44c75255c..798afcf68 100644 --- 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()),