Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

line chart shows negative y-axis, but there are no negative numbers #1593

Open
williamluotao opened this issue Feb 22, 2024 · 4 comments
Open
Labels
enhancement New feature or request Line Chart

Comments

@williamluotao
Copy link

williamluotao commented Feb 22, 2024

** Don't make a duplicate issue.
You can search in issues to make sure there isn't any already opened issue with your concern.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Provide us a completely reproducible code (contains the main function) in a main.dart file, it helps us to find the bug immediately.
Screen Shot 2024-02-22 at 19 05 11

Screenshots
If applicable, add screenshots, or videoshots to help explain your problem.

Versions

  • which version of the Flutter are you using?
    $ flutter --version
    Flutter 3.19.0 • channel stable • https://github.com/flutter/flutter.git
    Framework • revision bae5e49bc2 (13 days ago) • 2024-02-13 17:46:18 -0800
    Engine • revision 04817c99c9
    Tools • Dart 3.3.0 • DevTools 2.31.1
  • which version of the FlChart are you using?
    fl_chart: ^0.66.2
@harshpjoshi
Copy link

harshpjoshi commented Feb 27, 2024

@williamluotao I am able to fixing this issue by adding some Path logic. Here is the PR:1594
@imaNNeo Please check if it is a valid fix for same.
Thanks

@imaNNeo
Copy link
Owner

imaNNeo commented Feb 28, 2024

There is a solution at the moment, you can set preventCurveOverShooting: true in your LineChartBarData.
But I will take a look at the @harshpjoshi's solution.
Please provide me a reproducible code.

@imaNNeo imaNNeo added enhancement New feature or request Line Chart labels Feb 28, 2024
@williamluotao
Copy link
Author

There is a solution at the moment, you can set preventCurveOverShooting: true in your LineChartBarData. But I will take a look at the @harshpjoshi's solution. Please provide me a reproducible code.

LineChartData _createTimeSequenceData(List dt_list) {
print("dt_list ${dt_list}");
List spots = [];
List showingTooltipOnSpots = [];

  List<Map<String, dynamic>> b = List.generate(
    24,
        (index) => {"recHour": index, "times": 0},
  );
  List<double> stops = [];

  for (ChartSequence cs in dt_list) {
    showingTooltipOnSpots.add(cs.times);
    stops.add((cs.times).toDouble());

    var recHour = cs.recHour;
    var times = cs.times;
    var index = b.indexWhere((element) =>
    element["recHour"] ==
        int.parse(recHour.replaceAll(RegExp(r'[^0-9]'), '')));

    if (index != -1) {
      b[index]["times"] = times;
    }
  }
  //print(b);

  for (var entry in b) {
    spots.add(
        FlSpot(entry["recHour"].toDouble(), entry["times"].toDouble()));
  }
  //print(spots);


  Widget bottomTitleWidgets(double value, TitleMeta meta,
      double chartWidth) {
    final style = TextStyle(
      fontWeight: FontWeight.bold,
      color: Colors.blue,
      fontFamily: 'Digital',
      fontSize: 18 * chartWidth / 500,
    );
    String text;
    switch (value.toInt()) {
      case 0:
        text = '00:00';
        break;
      case 1:
        text = '';
        break;
      case 2:
        text = '';
        break;
      case 3:
        text = '';
        break;
      case 4:
        text = '04:00';
        break;
      case 5:
        text = '';
        break;
      case 6:
        text = '';
        break;
      case 7:
        text = '';
        break;
      case 8:
        text = '08:00';
        break;
      case 9:
        text = '';
        break;
      case 10:
        text = '';
        break;
      case 11:
        text = '';
        break;
      case 12:
        text = '12:00';
        break;
      case 13:
        text = '';
        break;
      case 14:
        text = '';
        break;
      case 15:
        text = '';
        break;
      case 16:
        text = '16:00';
        break;
      case 17:
        text = '';
        break;
      case 18:
        text = '';
        break;
      case 19:
        text = '';
        break;
      case 20:
        text = '20:00';
        break;
      case 21:
        text = '';
        break;
      case 22:
        text = '';
        break;
      case 23:
        text = '23:59';
        break;
      default:
        return Container();
    }

    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: Text(text, style: style),
    );
  }

  final Color gradientColor1 = Colors.blue;
  final Color gradientColor2 = Colors.pink;
  final Color gradientColor3 = Colors.red;
  final Color indicatorStrokeColor = Colors.white;

  final lineBarsData = [
    LineChartBarData(
      preventCurveOverShooting: true,
      showingIndicators: showingTooltipOnSpots,
      spots: spots,
      isCurved: true,
      barWidth: 4,
      shadow: const Shadow(
        blurRadius: 8,
      ),
      belowBarData: BarAreaData(
        show: true,
        gradient: LinearGradient(
          colors: [
            gradientColor1.withOpacity(0.4),
            gradientColor2.withOpacity(0.4),
            gradientColor3.withOpacity(0.4),
          ],
        ),
      ),
      dotData: const FlDotData(show: false),
      gradient: LinearGradient(
        colors: [
          gradientColor1,
          gradientColor2,
          gradientColor3,
        ],
        //stops: stops,
      ),
    ),
  ];

  final tooltipsOnBar = lineBarsData[0];

  // Customize other properties as needed
  return LineChartData(
      showingTooltipIndicators: showingTooltipOnSpots.map((index) {
        return ShowingTooltipIndicators([
          LineBarSpot(
            tooltipsOnBar,
            lineBarsData.indexOf(tooltipsOnBar),
            tooltipsOnBar.spots[index],
          ),
        ]);
      }).toList(),
      lineTouchData: LineTouchData(
        enabled: true,
        touchTooltipData: LineTouchTooltipData(
          tooltipBgColor: Colors.transparent, // Change this color as needed
            getTooltipItems: (List<LineBarSpot> lineBarsSpot) {
              return lineBarsSpot.map((LineBarSpot spot) {
                //print("dt_list ${dt_list}");
                //print("spot.spotIndex ${spot.spotIndex}");
                final int spotIndex = spot.spotIndex;
                if (spotIndex >= 0 && spotIndex < b.length) {
                  final Map<String, dynamic> entry = b[spotIndex];
                  return LineTooltipItem(
                    '${entry["recHour"]}:00(${entry["times"]})',
                    TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
                  );
                } else {
                  return LineTooltipItem('Invalid Index', TextStyle(color: Colors.red));
                }
              }).toList();
            },
        ),
        handleBuiltInTouches: true,
      ),
      lineBarsData: [
        LineChartBarData(
          spots: spots,
          isCurved: true,
          belowBarData: BarAreaData(show: false),
          color: Colors.blue,
          dotData: FlDotData(show: true),
          // Add other customization as needed
        ),
      ],
      titlesData: FlTitlesData(
        rightTitles: const AxisTitles(
          sideTitles: SideTitles(
            showTitles: false,
            reservedSize: 0,
          ),
        ),
        topTitles: const AxisTitles(
          sideTitles: SideTitles(
            showTitles: false,
            reservedSize: 0,
          ),
        ),
        leftTitles: AxisTitles(),
        bottomTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: true,
            interval: 1,
            getTitlesWidget: (value, meta) {
              return bottomTitleWidgets(
                value,
                meta,
                MediaQuery
                    .of(context)
                    .size
                    .width,
              );
            },
            reservedSize: 30,
          ),
        ),
        // Customize titles if needed
      ),
      gridData: FlGridData(show: false),
      borderData: FlBorderData(
        show: false,
      ) // Add other customization as needed
  );
}

The test data is dt_list [chartSequence{ recHour : 13, times : 2}]

Screen Shot 2024-02-29 at 14 16 52

@imaNNeo
Copy link
Owner

imaNNeo commented Mar 28, 2024

There is a solution at the moment, you can set preventCurveOverShooting: true in your LineChartBarData. But I will take a look at the @harshpjoshi's solution. Please provide me a reproducible code.

LineChartData _createTimeSequenceData(List dt_list) { print("dt_list ${dt_list}"); List spots = []; List showingTooltipOnSpots = [];

  List<Map<String, dynamic>> b = List.generate(

You're reproducible code is not well-formatted and also it is not complete.
Please give me a main.dart file content to allow me to run it directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request Line Chart
Projects
None yet
Development

No branches or pull requests

3 participants