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
You must be logged in to reply to this topic.