How to make a chart scrollable horizontally in Fltter

Question

I am using syncfusion_flutter_charts library to display data in form of SplineAreaSeries. I need to make the graph able to be scrollable to view numerous data. I tried to use SingleChildScrollView and changed the scrollDirection to Axis.horizontal. It functions right but the graph like collapses, I don't know the reason behind this. I even tried Expanded but nothing happened.

Container(
            width: width,
            height: height * 0.6,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: SfCartesianChart(
                borderColor: Colors.transparent,
                primaryXAxis: NumericAxis(
                  maximum: 40,
                  minimum: 1,
                  interval: 1.0,
                ),
                primaryYAxis: NumericAxis(
                  minimum: 0,
                  rangePadding: ChartRangePadding.round,
                ),
                series: <ChartSeries<ChartData, int>>[
                  SplineAreaSeries<ChartData, int>(
                    dataSource: chartData,
                    xValueMapper: (ChartData data, _) => data.day,
                    yValueMapper: (ChartData data, _) => data.ppm,
                    name: 'Methane Concentrations',
                    gradient: LinearGradient(
                      colors: [
                        AppStyle.spline_color,
                        AppStyle.bg_color.withAlpha(150)
                      ],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    ),
                  ),
                  SplineSeries(
                    dataSource: chartData,
                    xValueMapper: (ChartData data, _) => data.day,
                    yValueMapper: (ChartData data, _) => data.ppm,
                    color: AppStyle.accent_color,
                    width: 3,
                  )
                ],
              ),
            ),
          ),

Leo · Answer 1 · 2022-11-29T09:30:58.573

0

Put the singleChildScrollView outside the container.

SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child:  Container(
        width: width,
        child: SfCartesianChart(

I tested on android and it works.

edited Nov 29 '22 at 09:30

answered Nov 29 '22 at 08:28

Leo

369
5

No, it does not achieve the target – Omar Ramadan Nov 29 '22 at 08:31
you mean with no InteractiveViewer – Omar Ramadan Nov 29 '22 at 08:46
Again, nothing happens. When I increase the maximum value of X axis, the graph squeezes to fir all values at the width of the screen. – Omar Ramadan Nov 29 '22 at 10:00
I believe the problem is in syncfusion_flutter_charts, somehow it adapts to the screen, and this is not what I want – Omar Ramadan Nov 29 '22 at 10:02

How to make a chart scrollable horizontally in Fltter

1 Answers1