How to make scrollable x axis in flchart so that it looks nice not so compact in nature?

[nimesh1997]

Bar chart is very compact in nature if there are many values on the x-axis. How to make it less compact if there are so many values on x-axis. I want it to horizontal scrollable?

[GanZhiXiong]

There is too much content above, let me summarize it.

1. I have tried the above codes, but none of them work. Can anyone provide a demo that fully supports zooming and horizontal scrolling (you can put the code in the github warehouse or gist). It is recommended not to post it here, as it will affect reading other content.
2. The author is working full-time now and has no time or energy to generate electricity for love. If you are able, please donate:
   • Sponsor @imaNNeo on GitHub Sponsors
   • fl_chart is a library for drawing beautiful charts in Flutter

[jpgtzg]

I dont need this anymore, but it seems unfair that so long has passed and this issue has not been solved. Maybe I'll try and provide my implementation to close this issue soon

[kkellogg378]

I tried the idea by @Abhilash-Chandran and it almost worked, but I was having an issue where most of the time it wouldn't detect the horizontal drag, probably due to the LineChart taking priority. The modification I came up with was just using the touchCallBack property in LineTouchData to handle the dragging event instead of putting it in GestureDetector:

                    touchCallback: (touchEvent, lineTouchRsp) {
                      if (touchEvent is FlPanUpdateEvent) {
                        setState(
                          () {
                            var dx = touchEvent.details.delta.dx;

                            if (dx != 0) {
                              if (dx.isNegative) {
                                minX += (maxX - minX) * 0.01;
                                maxX += (maxX - minX) * 0.01;
                              } else {
                                minX -= (maxX - minX) * 0.01;
                                maxX -= (maxX - minX) * 0.01;
                              }
                            }
                          },
                        );
                      }
                    },

[Tobbyte]

I tried the idea by @Abhilash-Chandran and it almost worked, but I was having an issue where most of the time it wouldn't detect the horizontal drag, probably due to the LineChart taking priority. The modification I came up with was just using the touchCallBack property in LineTouchData to handle the dragging event instead of putting it in GestureDetector:

                    touchCallback: (touchEvent, lineTouchRsp) {
                      if (touchEvent is FlPanUpdateEvent) {
                        setState(
                          () {
                            var dx = touchEvent.details.delta.dx;

                            if (dx != 0) {
                              if (dx.isNegative) {
                                minX += (maxX - minX) * 0.01;
                                maxX += (maxX - minX) * 0.01;
                              } else {
                                minX -= (maxX - minX) * 0.01;
                                maxX -= (maxX - minX) * 0.01;
                              }
                            }
                          },
                        );
                      }
                    },

other solution would be to use onScaleUpdate for both scaling and panning instead of two competing GestureDetecotors

[Tobbyte]

I wanted to share my hacky workaround for making the chart zoomable and placing the (bottom) titles above the chart to be able to show whatever additional data.

It's not the most elegant solution, but maybe it can help someone else out there. bases on older solutions of @theovogel here and @techhouse here

minimal demo: repo

I use this to display week ticks across the chart, like so.

cheers :vulcan_salute:

[wuao]

hey. gays！ It's already 2024, why don't fix this issue

[Tobbyte]

@wuao kind of tall order for a one-man open source project, hm?.. see my post just before (!) yours for a solid workaround

[wuao]

感谢您的来信!请您有事去我的新博客：[恒星]http://my.oschina.net/wuao/blog生命不灭的恒星 当梦想擦撞到现实 请不要轻言放弃！ 

[AlexanderMonneret]

One of the biggest flaws of Flutter is the lack of official support (monetary) to such great plugins I'm going to start a Flutter Fund to support libraries like this Until then to speed up things and to make the whole community benefit from the solution I'm donating 100$ to who ever fix this issue Pinch zoom in & out, Horizonal scroll Mouse scroll for desktop No hacks, compete integration

Let me know when the PR is ready Cheers!

[wuao]

感谢您的来信!请您有事去我的新博客：[恒星]http://my.oschina.net/wuao/blog生命不灭的恒星 当梦想擦撞到现实 请不要轻言放弃！ 

[NeariX67]

I'm donating 100$ to who ever fix this issue

Willing to add another 100€/$ into the pool.

@imaNNeo Interested in doing this for the sake of code quality?

[devnta]

OMG ... 5 years passed...