Skip to content

Fix small stacked bar rendering adding unwanted fallback color - #2056

Open
BugsBuggy wants to merge 6 commits into
imaNNeo:mainfrom
BugsBuggy:fix/stacked-bar-chart-painter
Open

Fix small stacked bar rendering adding unwanted fallback color#2056
BugsBuggy wants to merge 6 commits into
imaNNeo:mainfrom
BugsBuggy:fix/stacked-bar-chart-painter

Conversation

@BugsBuggy

Copy link
Copy Markdown

When using BarChartRodData with rodStackItems and small values, fl_chart automatically pads the bar to an unknown minimum height using the fallback color:

color ?? ((color == null && gradient == null) ? Colors.cyan : null),

property instead of extending the stack items. This happens when a larger range toY values is present. This results in unwanted colored padding that doesn't represent actual data, making it impossible to create properly styled bars (e.g. with rounded edges) for small values without visual artifacts.
The issue occurs because fl_chart appears to enforce a minimum bar height for rendering/interaction purposes, but when the combined height of rodStackItems is less than this minimum, it fills the remaining space with the color property rather than allowing the stack items to handle the entire bar styling.

Expected behaviour: Showing small bars

Screenshots
I have overriden the default colour (cyan) with red so that the issue is visible. There should be no red proportion in the stacked chart:
Image

Versions

  • Flutter version: 3.29.3
  • FlChart Version: 1.0.0

The bug can be reproduced with this piece of code:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('fl_chart Stack Items Bug')),
        body: Center(
          child: Container(
            height: 300,
            width: 300,
            child: BarChart(
              BarChartData(
                maxY: 550,
                minY: 0,
                barGroups: [
                  // This bar works fine - large value
                  BarChartGroupData(
                    x: 0,
                    barRods: [
                      BarChartRodData(
                        toY: 500,
                        width: 40,
                        color: Colors.red, // This should not be visible
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(8),
                          topRight: Radius.circular(8),
                        ),
                        rodStackItems: [
                          BarChartRodStackItem(0, 100, Colors.blue),
                          BarChartRodStackItem(100, 500, Colors.green),
                        ],
                      ),
                    ],
                  ),
                  // This bar shows the bug - small value
                  BarChartGroupData(
                    x: 1,
                    barRods: [
                      BarChartRodData(
                        toY: 5,
                        width: 40,
                        color: Colors.red, // BUG: This red shows up as padding
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(8),
                          topRight: Radius.circular(8),
                        ),
                        rodStackItems: [
                          BarChartRodStackItem(0, 2, Colors.blue),
                          BarChartRodStackItem(2, 5, Colors.green),
                        ],
                      ),
                    ],
                  ),
                  // Transparent workaround doesn't work - loses rounded edges
                  BarChartGroupData(
                    x: 2,
                    barRods: [
                      BarChartRodData(
                        toY: 5, // Small value
                        width: 40,
                        color: Colors.transparent, // Workaround attempt
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(8),
                          topRight: Radius.circular(8),
                        ),
                        rodStackItems: [
                          BarChartRodStackItem(0, 2, Colors.blue),
                          BarChartRodStackItem(2, 5, Colors.green),
                        ],
                      ),
                    ],
                  ),
                  BarChartGroupData(
                    x: 3,
                    barRods: [
                      BarChartRodData(
                        toY: 40, // Small value
                        width: 40,
                        color: Colors.red,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(8),
                          topRight: Radius.circular(8),
                        ),
                        rodStackItems: [
                          BarChartRodStackItem(0, 20, Colors.blue),
                          BarChartRodStackItem(20, 40, Colors.green),
                        ],
                      ),
                    ],
                  ),
                ],
                titlesData: FlTitlesData(
                  bottomTitles: AxisTitles(
                    sideTitles: SideTitles(
                      showTitles: true,
                      getTitlesWidget: (value, meta) {
                        switch (value.toInt()) {
                          case 0: return Text('Large');
                          case 1: return Text('Small\n(Bug)');
                          case 2: return Text('Transparent\n(No edges)');
                          case 3: return Text('Large');
                          default: return Text('');
                        }
                      },
                    ),
                  ),
                  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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```

@BugsBuggy

Copy link
Copy Markdown
Author

@imaNNeo will you have a look? :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant