preventCurveOverShooting buggy in high inclination curves

[jamesblasco]

Sometimes the preventCurveOverShooting=true doesn't work correctly with high inclination curves. I have had several cases that the graph becomes negative.

Issue related:
#25

[imaNNeo]

Hey,
can you please provide us a reproducible code?

[imaNNeo]

If you don't provide a reproducible code, it's gonna be closed tomorrow.

[jamesblasco]

Sorry I had problems to find another example, as we delete that data from the database

A modified version of the line_chart_sample1.dart (tested on iphone 11)

Key parts are the FLSpots, the AspectRatio and the max, min values

Demo code

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

class LineChartSample1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => LineChartSample1State();
}

class LineChartSample1State extends State<LineChartSample1> {
  bool isShowingMainData;

  @override
  void initState() {
    super.initState();
    isShowingMainData = true;
  }

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(18)),
          gradient: LinearGradient(
            colors: const [
              Color(0xff2c274c),
              Color(0xff46426c),
            ],
            begin: Alignment.bottomCenter,
            end: Alignment.topCenter,
          ),
        ),
        child: Stack(
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                const SizedBox(
                  height: 37,
                ),
                Text(
                  'Unfold Shop 2018',
                  style: TextStyle(
                    color: const Color(0xff827daa),
                    fontSize: 16,
                  ),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(
                  height: 4,
                ),
                Text(
                  'Monthly Sales',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                      letterSpacing: 2),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(
                  height: 37,
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(right: 16.0, left: 6.0),
                    child: LineChart(
                    sampleData1(),
                      onRangeSelected: (range) =>
                          print('Range selected $range'),
                      swapAnimationDuration: Duration(milliseconds: 250),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
              ],
            ),
            IconButton(
              icon: Icon(
                Icons.refresh,
                color: Colors.white.withOpacity(isShowingMainData ? 1.0 : 0.5),
              ),
              onPressed: () {
                setState(() {
                  isShowingMainData = !isShowingMainData;
                });
              },
            )
          ],
        ),
      ),
    );
  }

  LineChartData sampleData1() {
    LineChartBarData lineChartBarData1 = const LineChartBarData(
      spots: [
        FlSpot(0.0, 0.0),
        FlSpot(0.5, 0.0),
        FlSpot(1.0, 0.0),
        FlSpot(1.0, 0.0),
        FlSpot(1.5, 0.0),
        FlSpot(2.0, 0.0),
        FlSpot(2.0, 0.0),
        FlSpot(2.5, 0.0),
        FlSpot(3.0, 0.0),
        FlSpot(3.0, 0.0),
        FlSpot(3.5, 0.0),
        FlSpot(4.0, 0.0),
        FlSpot(4.0, 0.0),
        FlSpot(4.5, 0.0),
        FlSpot(5.0, 0.0),
        FlSpot(5.0, 0.0),
        FlSpot(5.5, 0.0),
        FlSpot(6.0, 0.0),
        FlSpot(6.0, 0.0),
        FlSpot(6.5, 0.0),
        FlSpot(7.0, 0.0),
        FlSpot(7.0, 0.0),
        FlSpot(7.5, 0.0),
        FlSpot(8.0, 0.0),
        FlSpot(8.0, 0.0),
        FlSpot(8.5, 0.0),
        FlSpot(9.0, 0.0),
        FlSpot(9.0, 0.0),
        FlSpot(9.5, 0.0),
        FlSpot(10.0, 0.0),
        FlSpot(10.0, 0.0),
        FlSpot(10.5, 0.0),
        FlSpot(11.0, 0.0),
        FlSpot(11.0, 0.0),
        FlSpot(11.5, 0.0),
        FlSpot(12.0, 0.0),
        FlSpot(12.0, 0.0),
        FlSpot(12.5, 0.0),
        FlSpot(13.0, 0.0),
        FlSpot(13.5, 64.0),
        FlSpot(14.5, 481.0),
        FlSpot(15.5, 27.5),
        FlSpot(16.0, 0.0),
        FlSpot(16.5, 0.0),
        FlSpot(17.0, 0.0),
        FlSpot(17.0, 0.0),
        FlSpot(17.5, 0.0),
        FlSpot(18.0, 0.0),
        FlSpot(18.0, 0.0),
        FlSpot(18.5, 0.0),
        FlSpot(19.0, 0.0),
        FlSpot(19.0, 0.0),
        FlSpot(19.5, 0.0),
        FlSpot(20.0, 0.0),
        FlSpot(20.5, 38.0),
        FlSpot(21.5, 40.0),
        FlSpot(22.0, 0.0),
        FlSpot(22.5, 0.0),
        FlSpot(23.0, 0.0),
        FlSpot(23.5, 344.5),
        FlSpot(24.0, 0.0),
        FlSpot(24.5, 0.0),
        FlSpot(25.0, 0.0),
        FlSpot(25.0, 0.0),
        FlSpot(25.5, 0.0),
        FlSpot(26.0, 0.0),
        FlSpot(26.0, 0.0),
        FlSpot(26.5, 0.0),
        FlSpot(27.0, 0.0),
        FlSpot(27.0, 0.0),
        FlSpot(27.5, 0.0),
        FlSpot(28.0, 0.0),
        FlSpot(28.0, 0.0),
        FlSpot(28.5, 0.0),
        FlSpot(29.0, 0.0),
        FlSpot(29.0, 0.0),
        FlSpot(29.5, 0.0),
        FlSpot(30.0, 0.0)
      ],
      isCurved: true,
      preventCurveOverShooting: true,
      colors: [
        Color(0xff4af699),
      ],
      barWidth: 1,
      isStrokeCapRound: true,
      dotData: FlDotData(
        show: false,
      ),
      belowBarData: BarAreaData(
        show: false,
      ),
    );
    return LineChartData(
      lineTouchData: LineTouchData(
        enabled: false,
      ),
      gridData: const FlGridData(
        show: false,
      ),
      titlesData: FlTitlesData(
          bottomTitles: SideTitles(
            showTitles: false,
          ),
          leftTitles: SideTitles(
            showTitles: false,
          )),
      borderData: FlBorderData(
        show: true,
        border: Border(
          bottom: BorderSide(
            color: const Color(0xff4e4965),
            width: 1,
          ),
          left: BorderSide(
            color: Colors.transparent,
          ),
          right: BorderSide(
            color: Colors.transparent,
          ),
          top: BorderSide(
            color: Colors.transparent,
          ),
        ),
      ),
      minX: 8,
      maxX: 30,
      maxY: 500,
      minY: 0,
      lineBarsData: [
        lineChartBarData1,
      ],
    );
  }


}```
</details>

[imaNNeo]

I couldn't run your code.

what is onRangeSelected? (in line 70)

[jamesblasco]

ohh sorry, I forked the project for being able to select ranges instead of a spot. You can remove that as it doesn't affect it

[imaNNeo]

Hi,
preventCurveOvershootingThreshold added in LineChartBarData, you can change it to achieve your best result.
check it out in 0.8.4

[jamesblasco]

Thanks