imaNNeo / fl_chart

FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
https://flchart.dev
MIT License
6.77k stars 1.74k forks source link

sidetitle overloading each others #1635

Open majbar-emir opened 5 months ago

majbar-emir commented 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),
    );
  }
}

image

starlitya commented 4 weeks ago

+1