`belowBarData` does not fit the size of the line chart's start and end
Nobody has claimed this yet.
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
Hi,
I'm trying to create a Sparkline chart that has belowBarData enabled with a color.
However, the start and end of the belowBarData's color does not fit the size of the chart.
Here is how the Widget looks like:
As you can see the line's a bit wider than the belowBarData color:
I would expect that the belowBarData's color is also underneath the caps.
class Sparkline extends StatelessWidget {
final List<double> data;
const Sparkline({
super.key,
required this.data,
});
@override
Widget build(final BuildContext context) => LineChart(
LineChartData(
minY: 0,
gridData: const FlGridData(
show: false,
),
borderData: FlBorderData(
show: false,
),
titlesData: const FlTitlesData(
show: false,
),
lineTouchData: const LineTouchData(
enabled: false
),
lineBarsData: [
LineChartBarData(
color: const Color(0xFF17B26A),
spots: data
.mapIndexed((final index, final e) => FlSpot(index.toDouble(), e))
.toList(growable: false),
dotData: const FlDotData(
show: false,
),
barWidth: 4,
isStrokeCapRound: true,
isStrokeJoinRound: true,
belowBarData: BarAreaData(
color: Colors.red,
show: true,
),
),
],
),
);
}
// Example call:
Sparkline(data: [2, 3.1, 3.5, 2.8, 5.4, 9.2, 2.4, 3.5, 5.4, 7, ]);
- Flutter: 3.19.4
- fl_chart: 0.67.0
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the Sparkline example with LineChart, LineChartBarData, and BarAreaData, then inspect the rendering path for the line caps and below-bar area. Done means the belowBarData color reaches the same start and end extents as the rounded line when the reported configuration is used.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100