Line chart click event difficult to use

[Robert Masse]

Most of my plots are of line type. Default size of the line is 1. It has markers that are usually a little bigger. I’m finding it very tough to click exactly on the correct location to fire the click event. I’m assuming my mouse cursor has to be on the line. Is there a way to fire a click event when the mouse cursor is within the bounds of the marker instead?

Alternatively the reason I’m trying to do this is to let the user copy the x,y coordinates of the point they are on. I assumed I needed to handle that in the click event, but if there’s another way, I’d be interested to know what it is.

[Vishwas R]

Robert Masse,

Click event is fired even on clicking the marker. Please take a look at this JSFiddle.

If you are still facing issue, kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you resolve.

—
Vishwas R
Team CanvasJS

[Robert Masse]

I think this will reproduce the problem:

https://jsfiddle.net/35p4bnxk/18/

[Vishwas R]

Robert Masse,

It seems to be working fine – the event seems to be firing even when you click on marker. Please refer he screenshot below.

—
Vishwas R
Team CanvasJS

[Robert Masse]

It’s not working fine for me. I had to click 3 or 4 times to make it come up. It seemed like if I was really close to the center of the marker, it worked, but closer to the outside and it won’t. I’ll see if I can record a screenshot.

For reference, I’m using Chrome Version 83.0.4103.106 (Official Build) (64-bit) on Windows 10

[Robert Masse]

So, apparently I can’t link to a video I took of this problem. Every time I submit, the post gets swallowed without explanation by the message board. I guess I’ll paste it here as text instead of a link…

https://www.dropbox.com/s/ycferangwkpbdui/canvasjs_click.mp4?dl=0

So if you watch that video you’ll see the problem. After every mouse click, I move the cursor away. You’ll notice most of the first few attempts are successful. But then the last few attempts aren’t, even when the cursor is more near the middle of the marker.

[Vishwas R]

Robert Masse,

In case of line chart, click event gets fired when you click on marker as well. When you set markerSize, the click event gets fired only within the area of the marker based on markerSize. However, when you move mouse over a dataPoint, marker size gets increased by few pixels just to highlight it but event won’t get fired. You can disable highlighting by setting highlightEnabled to false.

In the JSFiddle that you have shared, markerSize is set to 2. In this case, click event will be fired only when you click within the marker of 2px.

—
Vishwas R
Team CanvasJS

[Robert Masse]

I’ll try that, however I know some of the clicks that failed were very close to, if not exactly in the middle.