We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to scroll horizontally when the chart has multiple bars?

Thread ID:

Created:

Updated:

Platform:

Replies:

151078 Jan 30,2020 10:18 AM UTC Feb 13,2020 04:39 PM UTC Flutter 13
loading
Tags: SfCartesianChart
Yudhisthir Singh Rajawat
Asked On January 30, 2020 10:18 AM UTC

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 [Syncfusion]
Replied On January 31, 2020 11:48 AM UTC

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
Replied On January 31, 2020 12:47 PM UTC

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

Yudhisthir Singh Rajawat
Replied On February 1, 2020 12:07 PM UTC

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

Yudhisthir Singh Rajawat
Replied On February 2, 2020 08:51 PM UTC

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 [Syncfusion]
Replied On February 3, 2020 10:37 AM UTC

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.  

Code snippet: 
 
SfCartesianChart( 
       primaryXAxis: CategoryAxis( 
             interval: 1,              
      ), 
 

Hope this helps.  

Thanks, 
Dharani. 


Yudhisthir Singh Rajawat
Replied On February 3, 2020 01:50 PM UTC

Thanks a lot, works like a charm.

Dharanidharan Dharmasivam [Syncfusion]
Replied On February 4, 2020 06:11 AM UTC

Hi Yudhisthir, 

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

Thanks, 
Dharani. 


Yudhisthir Singh Rajawat
Replied On February 6, 2020 09:06 AM UTC

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 [Syncfusion]
Replied On February 10, 2020 12:51 PM UTC

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. 


Thanks, 
Dharani. 


Yudhisthir Singh Rajawat
Replied On February 11, 2020 08:00 PM UTC

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 [Syncfusion]
Replied On February 12, 2020 02:47 PM UTC

 
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
Replied On February 12, 2020 05:25 PM UTC

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 [Syncfusion]
Replied On February 13, 2020 04:39 PM UTC

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. 
 
  
  
Code Snippet: 
  
  
  
SfCartesianChart(  
       primaryXAxis: CategoryAxis(  
             plotOffset: 50,               
      ),  
 
  


 
The Sample code can be found below. 
Sample: sample - code 
  
  
Thanks,  
Dharanitharan. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon