Fixed X axis that is Scrollable

Question

I have data as below where I need to show just fixed number of X axis point (for example 5) but I can have more than 5 data sets and have the ability to scroll to view the rest of the chart. Is there an example where I can follow?. Thank you.

data = { "x": 1, "y": 10, "x": 2, "y": 12, "x": 3, "y": 8, "x": 5, "y": 10, "x": 6, "y": 7, "x": 8, "y": 9, "x": 10, "y": 7 }

Srihari Muthukaruppan · Accepted Answer

Hi Albert,

We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using zoomFactor property in the axis of the chart. Based on your requirement we have prepared a sample for your reference. In which out of 10 datas we have displayed 5 datas as per your requirement. Please find the below sample, code snippet, and screenshot.

Sample: https://stackblitz.com/edit/angular-f8znpw?file=app.component.ts

Code Snippet:

app.component.ts:

// add your additional code here

public load(args: ILoadedEventArgs): void {

// zoomFactor = (double)Number of datas to be displayed / (double) Total number of datas

var zoomFactor: number = (5/ args.chart.series[0].dataSource['length']);

args.chart.primaryXAxis.zoomFactor = zoomFactor;

args.chart.zoomModule.isZoomed = true;

};

public zoomSettings: Object = {

mode: 'X',

enableMouseWheelZooming: true,

enablePinchZooming: true,

enableSelectionZooming: true,

enableScrollbar: true

};

app.component.html:

<ejs-chart [zoomSettings]='zoomSettings' (load)='load($event)' >
// add your additional code here
</ejs-chart>

Screenshot:

If still, this is not your exact requirement. kindly revert us with more information which will be helpful for further analysis and provide you solution sooner.

Regards,

Srihari M

Albert K · Answer

Thank you for the example. I can disable the Zooming, Selection Zoom and PinchZoom but how do i set a fix scroll bar range. For example the user can still stretch the scrollbar which I want it to be fixed to a for example 2 intervals. Thank you.

Srihari Muthukaruppan · Answer

Hi Albert, 

  


We have analyzed your query. From that, we would like to let you know that as of now there is no support to achieve your requirement. We have considered this scenario as a feature and we have logged a feature request on this. It can be tracked through our feedback portal below. 

  

Feedback Portal: https://www.syncfusion.com/feedback/16082/need-to-provide-resize-control-support-for-scrollbar 

  

The fix will be available in any of our releases. Please cast your vote to make it count. We will prioritize the features of every release based on the demands.  
  
If you have any more specifications/suggestions to the feature, you can add it as a comment in the portal.  
  

Regards, 

Srihari M