Open majbar-emir opened 5 months ago
fl_chart: ^0.67.0 Flutter 3.19.1 code to reproduce ( make sure you have long titles, more than 4 or 5 characters):
class CustomChartMulti extends StatefulWidget { const CustomChartMulti({ Key? key, this.width, this.height, required this.numbers1, required this.numbers2, required this.dataLabels, this.backgroundColor = Colors.white, this.barBackgroundColor = Colors.grey, this.barColor = Colors.blue, this.touchedBarColor = Colors.red, this.labelTextColor = Colors.white, this.axisTextColor = Colors.black, }) : assert(dataLabels.length == numbers1.length), assert(dataLabels.length == numbers2.length), super(key: key); final double? width; final double? height; final List<double> numbers1, numbers2; final List<String> dataLabels; final Color backgroundColor, barBackgroundColor, barColor, touchedBarColor, labelTextColor, axisTextColor; @override _CustomChartMultiState createState() => _CustomChartMultiState(); } class _CustomChartMultiState extends State<CustomChartMulti> { @override Widget build(BuildContext context) { return Container( width: widget.width ?? double.infinity, height: widget.height ?? 300, decoration: BoxDecoration( color: widget.backgroundColor, borderRadius: BorderRadius.circular(16), ), child: BarChart( BarChartData( barGroups: _getBarGroups(), titlesData: FlTitlesData( bottomTitles: AxisTitles( sideTitles: SideTitles( showTitles: true, getTitlesWidget: _bottomTitles, reservedSize: 42, ), ), leftTitles: AxisTitles( sideTitles: SideTitles(showTitles: false), ), topTitles: AxisTitles( sideTitles: SideTitles(showTitles: false), ), rightTitles: AxisTitles( sideTitles: SideTitles(showTitles: false), ), ), borderData: FlBorderData(show: false), gridData: FlGridData(show: false), ), ), ); } List<BarChartGroupData> _getBarGroups() { return List.generate(widget.dataLabels.length, (index) { return BarChartGroupData( x: index, barRods: [ BarChartRodData( toY: widget.numbers1[index], color: widget.barColor, width: 10, ), BarChartRodData( toY: widget.numbers2[index], color: widget.touchedBarColor, width: 10, ), ], ); }); } Widget _bottomTitles(double value, TitleMeta meta) { final style = TextStyle( color: widget.axisTextColor, fontWeight: FontWeight.bold, fontSize: 14, ); return SideTitleWidget( axisSide: meta.axisSide, space: 16, child: Text(widget.dataLabels[value.toInt()], style: style), ); } }
+1
fl_chart: ^0.67.0 Flutter 3.19.1 code to reproduce ( make sure you have long titles, more than 4 or 5 characters):