Crosshair with Angular 6

[kalev.noor]

We tried example http://jsfiddle.net/canvasjs/vxj5ugt2/ with Angular 6, but didn’t get success.
We tried even like that, move mouse over chart ‘antennaTxChart’, save some event, then move over chart ‘bandwidthChart’ and simulate saved event, evt2 event comes to listener ‘chh2.addEventListener(“mousemove”, function(e){ ‘, but no crosshair over ‘antennaTxChart ‘:

this.bandwidthChart = this.createChart(“bandwidthChart”, “”, ” Mbps”, “{x}<br>{y} Mbps”);
let evt2 = new MouseEvent(“mousemove”); // just used for a moment and will be replaced by another
let mine = this;
let ch = this.bandwidthChart;
let chh = document.getElementById(‘bandwidthChart’);
this.antennaTxChart = this.createChart(“antennaTxChart”, “Transmitted”, ” Mbps”, “{x}<br>{y} Mbps”);
let ch2 = this.antennaTxChart;
let chh2 = document.getElementById(‘antennaTxChart’)

chh.addEventListener(“mousemove”, function(e){
chh2.dispatchEvent(evt2);
console.info(“!!! ” + e.screenX/3 + ” ” + (e.screenY + ch2.get(“height”)) + ” ”
+ ch2.axisX[0].convertValueToPixel(ch.axisX[0].convertPixelToValue(e.clientX)) + ” ” + (e.clientY + ch2.get(“height”)))
});

chh2.addEventListener(“mousemove”, function(e){
evt2 = e;
console.info(e.screenX + ” ” + e.screenY + ” ” + e.clientX + ” ” + e.clientY)
});

Also we tried replace chh2, by ch2 and ch2.canvas, no result.
Please help, we really would have crosshair over all our charts, it’s really important for us. Thanks

[Vishwas R]

@kalev-noor,

Syncing crosshair across charts seems to be working fine and we are trying to reproduce the same in Angular 6. Meanwhile, can you kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive, so that we can run it at our end, understand the issue you are facing and help you resolve it?

—
Vishwas R
Team CanvasJS

[Vishwas R]

[Update]

Syncing Crosshair seems to be working fine in Angular aswell. Please take a look at this Sample Project for the same.

Kindly share sample project reproducing the issue you are facing so that we can look into your code, understand the scenario better and help you resolve it.

—
Vishwas R
Team CanvasJS

[kalev.noor]

Hello, thank you! I just used this.chart.canvas, but seems that it’s not same as $(“#chart”).find(“.canvasjs-chart-canvas”).get(1). It works now. It’s really ugly solution – https://stackblitz.com/edit/canvasjs-angular-sync-crosshair, I have 5 charts and just imaging what callback hell I have, there really must be something pretty without rethrowing from one chart to another and so on…

[Vishwas R]

@kalev-noor,

Syncing crosshair across charts is not possible using internal properties, as of now. However the work-around provided is one of the solution that seems to work fine irrespective of number of charts. Please feel free to share any other solution / suggestions to do the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

[UPDATE]

@kalev-noor,

We have just released v3.0 Beta-1 with this feature. Please refer to the release blog for more information. Do download the latest version from download page & let us know your feedback.

—
Vishwas R
Team CanvasJS