syncfusion / flutter-widgets

Syncfusion Flutter widgets libraries include high quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
1.56k stars 758 forks source link

[syncfusion_flutter_charts] [question] scroll a fixed width chart #2009

Open Macacoazul01 opened 1 month ago

Macacoazul01 commented 1 month ago

Bug description

I need a way to set a defined width to my chart and if it is bigger than my screen size to turn it into scrollable (or to create a scrollable chart by default).

Saw the sample on cartesian-charts but only with the auto scrolling option and i need the same behavior with fixed data:

https://github.com/user-attachments/assets/b6bdb976-880c-45b0-8505-2f3b14ae9921

Steps to reproduce

Just create the bellow sample and run it on different screen sizes. On smaller sizes it will be hard to see the chart content as it will resize to fit on the new avaliable space.

Code sample

Code sample ```dart SfCartesianChart grafico() { final dataSouces = conteudoGrafico(); return SfCartesianChart( plotAreaBorderWidth: 0, legend: const Legend( isVisible: true, position: LegendPosition.bottom, overflowMode: LegendItemOverflowMode.wrap, ), primaryXAxis: const CategoryAxis( labelIntersectAction: AxisLabelIntersectAction.multipleRows, majorGridLines: MajorGridLines(width: 0)), primaryYAxis: NumericAxis( axisLine: const AxisLine(width: 0), numberFormat: NumberFormat.compactSimpleCurrency( locale: const Locale('pt', 'BR').toString()), majorTickLines: const MajorTickLines(size: 0)), series: [ ColumnSeries( animationDuration: 500, dataSource: dataSouces[0], xValueMapper: (ModeloGrafico sales, _) => sales.x as String, yValueMapper: (ModeloGrafico sales, _) => sales.y, name: 'Entradas', color: const Color.fromRGBO(3, 155, 0, 1), ), ColumnSeries( animationDuration: 500, dataSource: dataSouces[1], xValueMapper: (ModeloGrafico sales, _) => sales.x as String, yValueMapper: (ModeloGrafico sales, _) => sales.y, name: 'Saídas', color: const Color.fromRGBO(198, 0, 0, 1), ), ColumnSeries( animationDuration: 500, dataSource: dataSouces[2], xValueMapper: (ModeloGrafico sales, _) => sales.x as String, yValueMapper: (ModeloGrafico sales, _) => sales.y, name: 'Perdas', color: const Color.fromRGBO(250, 225, 2, 1), ), ColumnSeries( animationDuration: 500, dataSource: dataSouces[3], xValueMapper: (ModeloGrafico sales, _) => sales.x as String, yValueMapper: (ModeloGrafico sales, _) => sales.y, name: 'Transferências', color: const Color.fromRGBO(201, 31, 174, 1), ), ], ); } List> conteudoGrafico() { List listaEntradas = []; List listaSaidas = []; List listaPerdas = []; List listaTransferencias = []; for (final mes in mesesDoAno) { listaEntradas.add(ModeloGrafico( x: mes, y: 10, )); listaSaidas.add(ModeloGrafico( x: mes, y: 10, )); listaPerdas.add(ModeloGrafico( x: mes, y: 10, )); listaTransferencias.add(ModeloGrafico( x: mes, y: 10, )); } return [listaEntradas, listaSaidas, listaPerdas, listaTransferencias]; } ```

Screenshots or Video

Screenshots / Video demonstration portrait (bellow) landscape ![chart2](https://github.com/user-attachments/assets/6ce9a480-5d74-4227-be90-d15b1c8dcf8f)

Stack Traces

..

On which target platforms have you observed this bug?

Android, iOS, Web, Web (Android browser), Web (iOS browser)

Flutter Doctor output

Doctor output ```console [√] Flutter (Channel stable, 3.22.3, on Microsoft Windows [versao 10.0.22631.3880], locale pt-BR) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [√] Chrome - develop for the web [X] Visual Studio - develop Windows apps X Visual Studio not installed; this is necessary to develop Windows apps. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components [√] Android Studio (version 2024.1) [√] VS Code (version 1.92.0) [√] Connected device (3 available) [√] Network resources ```
Macacoazul01 commented 1 month ago

the portrait one chart

ThilipChandru commented 4 weeks ago

Hi @Macacoazul01,

You can achieve the scrollable chart when the screen resize by setting AutoScrollingDelta value based on available width. Then enable ZoomPanBehaviour with enablePanning as true. We have attached the sample below for your reference. If you have any further queries, please get back to us. We are always happy to assist you.

Sample: gh_2009.zip

Regards, S Thilip Chandru.

Macacoazul01 commented 1 week ago

@ThilipChandru tks for the sample, this solves my problem!

I would like also to suggest changing the parameter name as the current one is misleading.

If this isnt possible, please feel free to close the issue