Bug: BarChartRodData with rodStackItems shows fallback color padding for small values
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
When using BarChartRodData with rodStackItems and small values, fl_chart automatically pads the bar to an unknown minimum height using the fallback color:https://github.com/imaNNeo/fl_chart/blob/17afdfb7edf6791fc37b8bb26c16974ad963e1af/lib/src/chart/bar_chart/bar_chart_data.dart#L346
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:

**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),
),
),
),
),
),
);
}
}
```
Contributor guide
Research direction
Start at lib/src/chart/bar_chart/bar_chart_data.dart near the referenced line and trace BarChartRodData rendering for rodStackItems when toY is small relative to the chart range. Reproduce the issue with the provided BarChart example and verify that small stacked bars contain only their stack-item colors, retain rounded edges, and show no fallback color padding.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100