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.75k forks source link

LineChartBarData: entry order causes invalid graph #1376

Open derdilla opened 1 year ago

derdilla commented 1 year ago

Describe the bug When adding entries to LineChartBarData the line is drawn in the order the FlSpot s have on the list rather than respecting the order of the x positions.

To Reproduce

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlChart Bug',
      home: SizedBox(
        width: 1000,
        height: 1000,
        child: Center(
          child: SizedBox(
            width: 800,
            height: 800,
            child: LineChart(
              LineChartData(
                minY: 0,
                maxY: 50,
                titlesData: const FlTitlesData(show: false),
                lineBarsData: [
                  LineChartBarData(
                    spots: const [
                      FlSpot(10, 20),
                      FlSpot(30, 10),
                      FlSpot(20, 30)
                    ],
                  ),
                ]
              )
            ),
          ),
        )
      ),
    );
  }
}

Screenshots image

Versions Flutter (Channel stable, 3.10.0, on Garuda Linux 6.3.9-zen1-1-zen, locale en_US.UTF-8) fl_chart: ^0.63.0

imaNNeo commented 1 year ago

I don't know what is correct and what is not. I mean you might need to keep the order correct by yourself. What do you think? Should we do this inside the chart? What if someone wants the exact result of your output?

derdilla commented 1 year ago

Of course, the easiest fix would be to just document this behavior and require the user to sort their input by themselves. (The default Flutter library uses assertions to warn the developer about this kind of behavior.)

But it might be the hardest, as with it comes a lot of behavior from functionality that wasn't designed to be used with a canvas. For example: what does the fill area below the chart option do with multiple lines on top of each other? (In the current implementation, it continues where it left off.) This would also make the user's code ugly in some cases, and they would end up writing their own wrappers or building functions for charts.

I would prefer if you could just sort the data internally. While this would remove a way to draw a continuous line on a plot, this will result in the best developer experience. In case you really want to be able to draw lines, you can add an option to disable sorting.

In the end, I don't really understand this project as a canvassing library, and I doubt anyone would use it as such.

imaNNeo commented 1 year ago

Okay, for now, please solve your issue by sorting your values outside the chart. Later we can do it internally. I need to think more about it. I mean I agree that it is a chart library (not a canvas library), but we need to keep the customizability