Manipulating axis cross hair from JS

[smithfx]

Hi, I am evaluating your product at the moment and have the requirement to position the axis cross hair based on input from a separate element on the page (a map actually).

I have an area chart which is showing the plot of the elevation of a route of the map. I need to be able to click on the map route and then show that same distance on the elevation plot to show the elevation (and other metrics).

Each point on the map has a corresponding point on the chart so that is the easy part. I know which dataPoint needs to be highlighted on the chart and don’t know if you have a corresponding API to allow me to show/hide that point (with the tool tip) on the chart. I reviewed the code from https://canvasjs.com/forums/topic/y-axis-cross-hair-synchronize-on-multiple-chart/ article of manipulating a cross hair of a second chart. The difference here is that I don’t know the pixel x and y. If there was a way to determine that from the index within the dataPoints, I could do the same trick.

[Manoj Mohan]

@smithfx,

You can achieve the above requirement by converting the provided X and Y value to the corresponding pixel coordinates using convertValueToPixel method and positioning the crosshair over the same as shown in this JSFiddle.

———
Manoj Mohan
Team CanvasJS

[smithfx]

Manoj,

Thanks for the reply. I was able to get everything working the way I hoped.

I was really stumped on the synchronize sample for the MouseEvent. I was finally able to figure it out and suggest you change the sample code for the createEvent method. You can change it to this:

function createEvent(type, clientX, clientY)
{
var event = new MouseEvent(type, {
bubbles: false,
cancelable: true,
clientX: clientX,
clientY: clientY
});
return event;
}

The extra properties you have in the options aren’t needed. In fact, there is no way to be able to translate the client x or y to a screen x or y. That was the area that had me stumped for a couple of hours yesterday. It wasn’t until I decided to try removing the screenX and screenY parameters that I was able to get around the issue.

[Manoj Mohan]

@smithfx,

Thanks for the suggestion. It seems like screenX and screenY properties are not required in this JSFiddle.

—–
Manoj Mohan
Team CanvasJS