You must be logged in to post your query.
Home › Forums › Chart Support › viewPort Max/Min with date value
Tagged: viewport
I’m building a ocean tide chart. I have tides for 14 days on a spline area chart. The issue is it shows all 14 days at once.
I need to be able to set the default view port of the chart to one day, with the users ability to pan/scroll on xAxis (left right) to other days.
@saltstrong,
You can programmatically zoom into a region by setting viewportMinimum and viewportMaximum.
To zoom into a certain region, there should be a minimum of 3-4 dataPoints – behavior is designed such that zooming is limited upto a certain region, so the user doesn’t end up zooming into a blank-region (region with no dataPoints). Due to this restriction, it’s not possible to pan chart as you zoom into the region with just 1 dataPoint.
——- Manoj Mohan Team CanvasJS
How would you setup a zoom for a date/time value on the xAxis?
You can set the viewportMinimum as viewportMinimum: new Date(2019,03,14) and viewportMaximum as viewportMaximum:new Date(2019,04,14) to achieve zooming programmatically over data/time axisX type.
viewportMinimum: new Date(2019,03,14)
viewportMaximum:new Date(2019,04,14)
Hey @manoj-mohan
Can you share a jsfiddle example that viewportMinimum works with time?
viewportMinimum
I tried 2 different ways, one is have x value as timestamp, and set xValueType: “dateTime”. like following
{ "type": "line", "axisX": [ { "viewportMaximum": 1611186373807, "viewportMinimum": 1611182782013 } ], "data": [ { "markerType": "circle", "type": "line", "xValueType": "dateTime", "dataPoints": [ { "y": 101789, "x": 1611185700000, }, { "y": 12834, "x": 1611186300000, } ], } ], }
But it doesn’t set the range to my desired value. However if I comment out xValueType: "dateTime", it will work because x value got treated as number.
xValueType: "dateTime"
I tried to set x and viewportMinimum to Date object like viewportMinimum: new Date(2019,03,14), but it still doesn’t work.
@canvasjsuser001,
Thanks for reporting the use-case. We will fix this issue in our future versions. However, you can work-around the issue by setting minimum property of axisX as shown in this JSFiddle.
—- Manoj Mohan Team CanvasJS
We have released CanvasJS Chart v3.2.18 GA with this bug fix, please check out release blog for more information. Please download the latest version from our download page and let us know your feedback.
— Manoj Mohan Team CanvasJS
You must be logged in to reply to this topic. Login/Register