CODEWITHSUNDEEP
flutterdartscrolllinechartfl-chart
Dalon
Dalon

Reputation: 700

How to scroll horizontal in a line chart using fl_chart in Flutter?

I want to show data from a List in a line chart. The Problem is that the width is too small. So I want that you can scroll horizontal to see everything. How to do this with the Package fl_chart?

Here is my Code, i build the spots from a List.

  @override
  Widget build(BuildContext context) {
    return LineChart(
        LineChartData(
            lineBarsData: [
          LineChartBarData(
              spots: [
            for (int i = reversedList.length - 1; i >= 0; i--)
              FlSpot(i.toDouble(), reversedList[i].weight),
          ])
        ]));
  }
}

Upvotes: 4

Views: 11716

Answers (2)

Gustavo Duregger
Gustavo Duregger

Reputation: 71

One possibility is to make the x-axis dynamic.

 @observable
  int xMinValue = 0;
  
  @action
  void updateXMinValue(int newValue) {
    xMinValue = newValue;
  }

That way you can generate the bars in a specific range

for (int i = controller.xMinValue; i <= indexController; i++) {
      rawBarGroups.add(makeGroupData(
        x: i,
        bar1: widget.chartDataSet[i].bar1));
    }

Finally, you can change this range from a swipe movement in the graph component, one way to do this is using the GestureDetector.

GestureDetector(
      onHorizontalDragEnd: (DragEndDetails details) {
        if (details.primaryVelocity! > 0 && controller.xMinValue > 0) {
          controller.updateXMinValue(controller.xMinValue - 1);
        } else if (details.primaryVelocity! < 0 && widget.chartDataSet.first.index! > controller.xMinValue + 7) {
          controller.updateXMinValue(controller.xMinValue + 1);
        }
      },
      child: BarChart(
        BarChartData( ...

In a graph with a large number of spots, this solution can become a usability problem as navigation tends to be a little slower by using the swipe gesture. In these cases I recommend using a solution closer to a zoom in the graph, you can find an example here: https://github.com/imaNNeo/fl_chart/issues/71#issuecomment-1414267612

Or you can even use "onHorizontalDragUpdate" which will perform updates in real time when touching the screen. Initially, as these updates often occur during the Swipe/Scroll gesture, you will find that you will need to create a sensitivity controller to consider only some of the values obtained in the update.

GestureDetector(
      onHorizontalDragUpdate: (DragUpdateDetails details) async {
          //logic to update XMinValue, as was done in the first example
          controller.chartScrollSensitive = 0;
        } else {
          controller.chartScrollSensitive++;
        }
      },
      child: BarChart(...

Upvotes: 0

MindStudio
MindStudio

Reputation: 786

Set the width of your LineChart to the width you need and wrap the LineChart() widget in a SingleChildScrollView() and set scrollDirection: Axis.horizontal

Edit: I think you need to wrap the LineChart() in a Container() with fixed width first. Otherwise the Chart may try to extend towards infinity.

Upvotes: 4

Related Questions