Bar chart rod color is wrong with small value

[Moseco]

Describe the bug When using a bar chart and one of the values is much smaller than the other values the color of the rod is wrong (it renders as a blue-ish color, screenshot attached below). If a border radius is given then it has a mix of the correct color and the wrong color but if a border radius of 0 is given then it only shows the correct color.

To Reproduce

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SizedBox(
          height: 200,
          child: BarChart(
            BarChartData(
              alignment: BarChartAlignment.spaceEvenly,
              barTouchData: BarTouchData(enabled: false),
              titlesData: FlTitlesData(
                show: true,
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    reservedSize: 32,
                    getTitlesWidget: (number, __) => Text(
                      number.toString(),
                      style: const TextStyle(color: Colors.grey),
                    ),
                  ),
                ),
                leftTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    reservedSize: 24,
                    getTitlesWidget: (number, __) => Text(
                      number.toString(),
                      style: const TextStyle(color: Colors.grey),
                    ),
                  ),
                ),
                topTitles: const AxisTitles(
                  sideTitles: SideTitles(showTitles: false),
                ),
                rightTitles: const AxisTitles(
                  sideTitles: SideTitles(showTitles: false),
                ),
              ),
              gridData: const FlGridData(show: false),
              borderData: FlBorderData(show: false),
              barGroups: [
                BarChartGroupData(
                  x: 0,
                  barRods: [
                    BarChartRodData(
                      toY: 100,
                      rodStackItems: [
                        BarChartRodStackItem(
                          0,
                          100,
                          Colors.green,
                        ),
                      ],
                      borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(8),
                        topRight: Radius.circular(8),
                      ),
                      width: 8,
                    ),
                    BarChartRodData(
                      toY: 1,
                      rodStackItems: [
                        BarChartRodStackItem(
                          0,
                          1,
                          Colors.red,
                        ),
                      ],
                      borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(8),
                        topRight: Radius.circular(8),
                      ),
                      width: 8,
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Screenshots

Versions

• Flutter: 3.24.3
• fl_chart: 0.69.0

[GlaucoMendes]

Same thing here, any updates?

[GlaucoMendes]

I found a temporary solution, making it transparent. But the ideal would be to fill it with the color defined in the bar.

final rod = BarChartRodData( toY: runningTotal, rodStackItems: stackItems, borderRadius: BorderRadius.circular(6), color: Colors.transparent, width: 25, ); ``

[artshooter]

Analysis:

The issue I observed stems from:

1. The bar's main body (background) has a default background color

2. Since the bar body's height cannot be lower than the border radius of the bar chart, the rendered bar body may be taller than the actual rendered height of the bar stack items (rodStackItems)

3. Since the rendering logic draws the bar body background first and then overlays the bar stack items on top, when the stack items' height is insufficient to cover the entire bar body, the default background color of the bar becomes visible, resulting in incorrect color display

Solution:

When this situation is detected (i.e., when the actual height of the bar stack is smaller than the minimum height required for the corner radius), I introduced a scale factor to proportionally expand the rendered height of the bar stack items. This ensures they can fully cover the bar body's height and hide the default background color. This approach maintains the proportional relationships among the stack items while fixing the color display issue.

Hello @imaNNeo, This is PR https://github.com/imaNNeo/fl_chart/pull/2018 for this issue Please let me know if there's anything that needs to be adjusted. Looking forward to your feedback. Thanks!