Please add exactly explanation for scrolling to your docs

[desmeit]

I want to use a line chart with scrolling but didnt find any explanation or sample code for it.
I added SingleChildScrollView but there is no isScrollable option inside of behaviour.
Furthermore, it is not clear to me where the maximum X Axis should be added so that scrolling can work.
I always see everything in one view. visibleItems is not working as well.

 body: Center(
            child: Expanded(
                child: SingleChildScrollView(
                    controller: _scrollController,
                    scrollDirection: Axis.horizontal,
                    child: SizedBox(
                        width: 300,
                        height: 300,
                        child: Chart(
                          state: ChartState<void>(
                            data: ChartData.fromList(
                                [2, 3, 4, 4, 7, 6, 2, 5, 4]
                                    .map((e) => ChartItem<void>(e.toDouble()))
                                    .toList(),
                                axisMax: 10,
                                axisMin: 1),
                            itemOptions: BarItemOptions(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 2.0),
                              barItemBuilder: (_) => BarItem(
                                color: Theme.of(context).colorScheme.secondary,
                                radius: BorderRadius.vertical(
                                    top: Radius.circular(12.0)),
                              ),
                            ),
                            behaviour: ChartBehaviour(
                                scrollSettings:
                                    const ScrollSettings(visibleItems: 3),
                                onItemClicked: (value) => print("clicked")),

                            // itemOptions: WidgetItemOptions(
                            //     widgetItemBuilder: (_) => Container()),
                            backgroundDecorations: [
                              HorizontalAxisDecoration(
                                axisStep: 2,
                                showValues: true,
                                lineColor: Colors.green,
                              ),
                              GridDecoration(
                                showVerticalValues: true,
                                showHorizontalValues: true,
                                verticalAxisStep: 1,
                                horizontalAxisStep: 1,
                                gridColor: Colors.grey,
                                textStyle: const TextStyle(
                                  color: Colors.black,
                                  fontSize: 14,
                                ),
                              ),
                              // SparkLineDecoration(
                              //   smoothPoints: true,
                              //   lineColor: FitnessAppTheme.accentColor,
                              // ),
                            ],
                            foregroundDecorations: [
                              SparkLineDecoration(
                                lineWidth: 2.0,
                                // gradient: lineColor(minY, maxY),
                                smoothPoints: true,
                              ),
                            ],
                          ),
                        )))))

[lukaknezic]

Hey @desmeit, thanks for reporting this, I will update the documentation to explain that part better.

For scrollable charts you need to:

• Add scroll settings in ChartBehaviour
• Add width to the chart widget

Also from your code you will have to remove SizedBox (Since chart cannot be scrollable if it's to smal box that fits in the screen)

Center(
  child: SingleChildScrollView(
    controller: _scrollController,
    scrollDirection: Axis.horizontal,
    child: SizedBox(
      height: 300,
      child: Chart(
        width: 300,
        state: ChartState<void>(
          data: ChartData.fromList(
            [2, 3, 4, 4, 7, 6, 2, 5, 4].map((e) => ChartItem<void>(e.toDouble())).toList(),
            axisMax: 10,
            axisMin: 1,
          ),
          itemOptions: BarItemOptions(
            padding: const EdgeInsets.symmetric(horizontal: 2.0),
            barItemBuilder: (_) => BarItem(
              color: Theme.of(context).colorScheme.secondary,
              radius: BorderRadius.vertical(top: Radius.circular(12.0)),
            ),
          ),
          behaviour: ChartBehaviour(
            scrollSettings: const ScrollSettings(visibleItems: 3),
            onItemClicked: (value) => print("clicked"),
          ),
          
          // itemOptions: WidgetItemOptions(
          //     widgetItemBuilder: (_) => Container()),
          backgroundDecorations: [
            HorizontalAxisDecoration(
            axisStep: 2,
            showValues: true,
            lineColor: Colors.green,
            ),
            GridDecoration(
              showVerticalValues: true,
              showHorizontalValues: true,
              verticalAxisStep: 1,
              horizontalAxisStep: 1,
              gridColor: Colors.grey,
              textStyle: const TextStyle(
                color: Colors.black,
                fontSize: 14,
              ),
            ),
          ],
          foregroundDecorations: [
            SparkLineDecoration(
              lineWidth: 2.0,
              smoothPoints: true,
            ),
          ],
        ),
      ),
    ),
  ),
)