How to scroll horizontally when the chart has multiple bars?

[Yudhisthir Singh Rajawat]

The number of bars are exceeding the screensize and without the scroll, the bars are placed too close to each other which in sot what I want. How do I have a scroll feature with the SF charts in flutter?

[Dharanidharan Dharmasivam]

Hi Yudhisthir,  

  

 

Greetings from Syncfusion. We have analyzed your query. Your requirement can be achieved using the visibleMinimum and visibleMaximum properties of the axis. Here you need to specify the range which needs to visible in the viewport and enable the panning to pan the data which are not in the viewport.  

We have prepared a sample in which we have 50 days, out of that we have shown the last 30 days in the viewport. To see the remaining days, you can pan the chart to view others. Find the code snippet below.  

 

SfCartesianChart(  

      primaryXAxis: DateTimeAxis(  

        visibleMinimum: chartData[chartData.length-29].x,  

        visibleMaximum: chartData[chartData.length-1].x  

      ),  

      zoomPanBehavior: ZoomPanBehavior(  

        enablePanning: true,   

      ),  

      //Other configurations  

    ),  

  

Sample for reference can be found from below link.
https://www.syncfusion.com/downloads/support/forum/151078/ze/sample1322811675  

 

Thanks,
Dharani. 

[Yudhisthir Singh Rajawat]

Your reply was helpful for me but not completely, what if I have string values on my x-axis?

[Yudhisthir Singh Rajawat]

And what if want to see first 30 instead of last 30?

[Yudhisthir Singh Rajawat]

I was able to solve both the issues that I have mentioned.
I am having another problem that I don't see resolving, I have a list of data with the data type of string on the x-axis, only first label shows, and all subsequent ones show one by one when scrolled. I want all labels to be shown, for the bars that are in the viewport. https://ibb.co/VH0s9xK

[Dharanidharan Dharmasivam]

Hi Yudhisthir, 

Thanks for your information. Your requirement can be achieved by specifying the interval of the category axis. We have prepared a sample with respect to the above requirement which can be found below.  

https://www.syncfusion.com/downloads/support/forum/151078/ze/Sample_(1)-944178641  

Code snippet: 

 

SfCartesianChart( 

       primaryXAxis: CategoryAxis( 

             interval: 1,              

      ), 

) 

 

Hope this helps.  

Thanks, 

Dharani. 

[Yudhisthir Singh Rajawat]

Thanks a lot, works like a charm.

[Dharanidharan Dharmasivam]

Hi Yudhisthir, 

Most welcome. Kindly revert us if you need further assistance. We are happy in assisting you.  

Thanks, 

Dharani. 

[Yudhisthir Singh Rajawat]

I was able to make the scroll happen when there are bars that are exceeding the size of the screen, I ran into other problems though, as follows:

1. I need a scroll bar which indicates how many items are there to be scrolled.

2. The charts scroll is giving problems when done with the swiping of pages, If I want to change pages with swipe gesture, the chart scroll doesn't seem to be working.

[Dharanidharan Dharmasivam]

Hi Yudhisthir, 

Thanks for being patience. As stated earlier, you can use the visibleMinimum and visibleMaximum properties to show only a few data in the visible range. And as of now, we don’t have scrollbar support for chart widget to view the data other than in visible range. So, we have considered your scenario as a feature request and this feature will be available in any of our upcoming releases. You can track the status of the feature from below. 

https://www.syncfusion.com/feedback/11947  

Thanks, 

Dharani. 

[Yudhisthir Singh Rajawat]

Will be waiting for the update, I have one last query related to this thread which is: 
When I try to show, say first 5 items from a list of 15 items in a chart, The very first item seems to appear too left when I give visibleMinimum as 0 and visibleMaximum as 5. I'm attaching a picture for reference. Any solution for this? https://ibb.co/LhnJTcw

[Dharanitharan Palanisamy]

 

Hi Yudhisthir, 

  

We have analyzed your query and your requirement can be achieved by using the edgeLabelPlacement property. The code snippet as follows. 

    

  

SfCartesianChart(  

       primaryXAxis: CategoryAxis(  

             edgeLabelPlacement: EdgeLabelPlacement.shift,               

      ),  

)  

  

 

  

 The sample for reference can be found below. 

 

Sample: sample - code 

 

 

Thanks, 

Dharanitharan. 

[Yudhisthir Singh Rajawat]

Well, I think you misunderstood my query.

My query was related to the whole bar going in too inside into left by deafult, I want it to have, maybe some padding on the left so that the first bar shows when the screen loads and is not hidden in the left behind the scale.

I am attaching two pictures for comparison, Case 1 is what's happening & Case 2 is what I want.

Case 1: https://ibb.co/zrWpCF7

Case 2: https://ibb.co/WzNgSfw

[Dharanitharan Palanisamy]

Hi Yudhisthir,  

  

  

Sorry for the inconvenience. Now we have understood your query with the provided screenshot and your requirement can be achieved by specifying plotoffset property in X-Axis as you need. When the plotOffset is specified then the specified space will be occupied at the start and end of the axis. For example, when value 5 is specified, then 5pixel space will be added at both the edges of axis. 

  

  

For more information about an axis customization, find the user guide below. 

 

https://help.syncfusion.com/flutter/chart/axis-customization#offset-the-rendering 

  

  

Code Snippet: 

  

  

  

SfCartesianChart(  

       primaryXAxis: CategoryAxis(  

             plotOffset: 50,               

      ),  

)  

  

 

The Sample code can be found below. 

Sample: sample - code 

  

  

Thanks,  

Dharanitharan.