imaNNeo / imaNNeo/fl_chart

`belowBarData` does not fit the size of the line chart's start and end

Open
#1,628 0 comments 0 reactions 0 assignees View on GitHub

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:

image

As you can see the line's a bit wider than the belowBarData color:

image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.