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

Question

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

Solution

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.

Comments

[Dalon]

Thank you, but the with is still a fixed value and when the data grow (user can dynamically add more data) the width is too small. How can i relate the with to the data in my list, so that when the list gets bigger the width also increase?

[MindStudio]

just calculate the width dynamically: width: reversedList.length*20 for example