How to scroll horizontally when the chart has multiple bars?

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.  

 

  

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

 

Thanks,
Dharani. 

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: 

Hope this helps.  

Thanks, 

Dharani. 

Hi Yudhisthir, 

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

Thanks, 

Dharani. 

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.

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. 

 

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. 

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

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: 

  

  

 

The Sample code can be found below. 

Sample: sample - code 

  

  

Thanks,  

Dharanitharan.