Synchronise Crosshair/Trackball in multiple charts

Question

Is it possible to synchronize the crosshair/trackball in angular charts similar to this https://www.syncfusion.com/kb/11881/how-to-synchronize-trackball-in-multiple-charts-sfcartesianchart

I can't figure out how to implement this in angular.

Srihari Muthukaruppan · Accepted Answer

Hi Michael,

We can achieve your requirement using chartMouseMove event in the chart. Based on your requirement we have prepared a sample for your reference in angular platform. Please find the sample, code snippet and screenshot below.

Sample: https://stackblitz.com/edit/angular-8jq6my?file=app.component.html

Code Snippet:

App.component.html:

// add your additional code here

<ejs-chart #chart height="300" width="100% " id="charts" [primaryXAxis]="primaryXAxis"

[primaryYAxis]="primaryYAxis" [tooltip]="tooltip" [crosshair]="crosshair" (load)="load($event)"

(chartMouseMove)="mousemove($event)">

// add your additional code here

</ejs-chart>

<ejs-chart #chart1 height="300" width="100% " id="charts1" [primaryXAxis]="primaryXAxis"

[primaryYAxis]="primaryYAxis" [tooltip]="tooltip" [crosshair]="crosshair" (load)="load($event)">

// add your additional code here

</ejs-chart>

App.component.ts:

// add your additional code here

@ViewChild("chart")

public chart: ChartComponent;

@ViewChild("chart1")

public chart1: ChartComponent;

public mousemove(args: IMouseEventArgs): void {

if (this.chart) {

this.mousemoveEvent( document.getElementById("charts1"), args.x, 408, args.x, 407);

}

public mousemoveEvent(element, sx, sy, cx, cy) {

let mousemove = document.createEvent("MouseEvent");

mousemove.initMouseEvent( "mousemove", true, false, window, 1, sx, sy, cx, cy, false, false, false, false, 0, null);

element.dispatchEvent(mousemove);

}

// add your additional code here

Screenshot:

Let us know if you have any concerns.

Regards,

Srihari M