Problem zooming to the end of a chart

[ruwangika]

I am using CanvasJS to display some zoom-enabled line charts in my website. Selecting the area to be zoomed becomes really difficult if the user wants to select till the very end of the chart. The selection is lost when the mouse pointer moves over the right edge of the chart. Is there any way to prevent this? Either to automatically select till the end of the chart when the pointer moves over the edge, or to decrease pointer speed when approaching the edge?

[Bivek Singh]

@ruwangika,

The selection area gets clear only when the mouse moves out of chart. When the mouse is still over the chart, it won’t clear the selected area. Can you kindly create a jsfiddle with the issue so that we can look into the issue and help you out?

——
Bivek Singh

[iam]

Hello, is this topic alive?
There is an example of zoom-enabled option. If you will try to zoom till the left edge of canvas – you would not get any result

[Indranil]

@iam,

We tried reproducing the issue at our end, but it seems to be working fine. Can you please create a jsfiddle reproducing the issue and also elaborate the issue you are facing so that we can help you out better.

_________
Indranil Deo,
Team CanvasJS

[iam]

I created this example and if you will try to zoom to the top or bottom line – zoom functiom would not work.

• This reply was modified 7 years, 1 month ago by iam. Reason: wrong link

[Indranil]

@iam,

The 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). To zoom into a certain region, there should be a minimum of 3-4 dataPoints.

__________
Indranil Deo,
Team CanvasJS

[iam]

Okey, I changed example code, look here please. The problem is the same: you can not zoom to the edges.

[iam]

Sorry, that code is what I wanted to show

[Indranil]

@iam,

We are unable to reproduce the issue at our end and it seems to be working fine. Here is the screenshot of the same.

Can you kindly share the range (viewportMinimum and viewportMaximum) where you are facing the issue?

_________
Indranil Deo,
Team CanvasJS

[cjb22]

Hi Indranil,

Sorry to jump in uninvited, but I would like to support the OP in this request as I also find this feature a bit annoying! I don’t think there is any difficulty in reproducing the issue, but it seems you don’t think it is a problem.

In your example above, it is only possible to reproduce your screenshot if the user manages to release the mouse on the *exact pixel* at the top-left corner of the data area. One pixel too far to the left or top and the selection box disappears and they have to start again, or keep the mouse button depressed and try to hit that pixel with the selection box flickering on and off. If the user compensates by selecting a slightly too small area, they then have to switch to panning mode to check that they are seeing all the data. This makes a very frustrating user experience. It would be better if the selection area simply clamped to the appropriate chart edge whenever the mouse moves outside the valid region.

In our application we are displaying a time series of historical data and allowing zooming only on the X-axis. It is natural for the user to want to zoom in on the most recent data, and most people do this by selecting the oldest date of interest and swiping quickly to the right-edge of the data area. It is very counter-intuitive that the selection disappears if the swipe action overshoots the plot limit by a tiny amount.

[iam]

This is what I wanted to tell but I had not time for it. Thanks for your report, this problem realy makes users screaming

[Indranil]

@iam,

Sorry for the inconvenience. I have discussed this with the development team & we will re-consider this behavior for the future versions.

__________
Indranil Deo,
Team CanvasJS

[emjayoh]

Hello,

We currently also are experiencing difficulties with this issue and are wondering if there is any progress updates? One of our most common use-cases is to zoom to the edges of the graphs.

Ideally, the behavior would just stop the zoom border at the edge, regardless of mouse position.

Thank you.

[Indranil]

@emjayoh,

Thanks for your suggestion. We will reconsider this behavior in future releases.

—
Indranil Singh Deo
Team CanvasJS

[offwhite]

I think it would also help the problem if you could set the viewportMaximum to greater than the last point on the chart.

I understand that you don’t want the user to zoom to an area without data points, but I think it makes more sense for the logic to be

viewportMinimum < last_plotted_point

rather than

viewportMaximum > last_plotted_point

Then, on zoom reset, I could set the viewportMaximum to (last_plotted_point + padding)

selecting this chart area would be trivial.