[ XY Plot Time Series ] - Zooming beyond the edge of the chart functionality

[JayWebz]

History

From #187 -

zooming beyond the edge of the chart is issue addressed on their forum https://canvasjs.com/forums/topic/problem-zooming-to-the-end-of-a-chart/. It seems that they do not consider it an issue with priority enough to update yet. The current solution is to hold down the mouse and continue trying to line up the zoom with the edge of the chart as the selection is still active. The solution https://canvasjs.com/forums/topic/hard-to-zoom-around-corners-of-graph/ allows me to add padding to the edge of the chart, however that is not desired, but currently implemented.

Goal

Remove current padding solution entirely, allow for zoomed range to be visible when dragging mouse beyond confines of the visual component.

Steps

• Get account access to be able to post on the canvasjs.com forums.
• Find their github and post an issue there.
• See if there are packages built on top of canvasjs that solve for issue.
• See if I can update the code directly to allow for the zoom to over reach. (Not to be spent too long on).

Short-term Solutions

• Reduce padding value to 1%
• Add an indication to the x-axis that indicates the current time. "NOW". Possibly date/time stamp.

[JayWebz]

Was able to post on their forum. Apparently UCSD email doesn't like the reset password email that comes from canvasjs. I re-registered with a gmail address and had no problem. I was able to post in the chat asking if the issue has any priority at this stage and expressing what the expected behavior should be. https://canvasjs.com/forums/topic/problem-zooming-to-the-end-of-a-chart/page/2/#post-34380.

canvasjs doesn't have a public github repo and all chat is funneled through their website forum.

[JayWebz]

a canvasjs representative responded to me today. They provided a snippet of a solution to a problem that doesn’t quite resemble the current issue. Responded with a video and some clarification, check back in tomorrow. https://canvasjs.com/forums/topic/problem-zooming-to-the-end-of-a-chart/page/2/#post-34424

[JayWebz]

representative responded with

Mouse events are captured only when mouse is on top of the chart. Any mouse event fired outside of the chart cannot be captured. Hence, it is not possible to trigger the zoom when mouse event is fired out of the chart as of now.

However, we will reconsider this behavior in future releases.

Going to suggest if an optional function can be passed into canvas js that contains the event listener so that the context outside of the react component is understood.

[JayWebz]

Reduced padding down from 5% to 1% - #232

[JayWebz]

I responded to the representative asking if its possible to set up an optional function prop to be passed to canvasjs that can help manage tracking the mouse location beyond the confines of the canvasjs component. https://canvasjs.com/forums/topic/problem-zooming-to-the-end-of-a-chart/page/2/#post-34561

[JayWebz]

representative responded with

Currently, the chart component has its own zoom and pan functionality, and cannot consume any events fired from a parent component that could trigger the zoom event.