imaNNeo / fl_chart

FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
https://flchart.dev
MIT License
6.77k stars 1.74k forks source link

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

Open ManuelRauber opened 5 months ago

ManuelRauber commented 5 months ago

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, ]);