Syncfusion chart synchronised crosshair - Angular

Question

My problem is that I didn't find any solution so far that could display the crosshair across my charts synchronusly. Although, I found a solution for my problem here:

https://www.syncfusion.com/forums/164787/synchronise-crosshair-trackball-in-multiple-charts

but it display the crosshairs using pixelisations. I need a solution where I could draw the crosshairs by X coordinates simultaneously (where X is a date)

public syncronisedCrosshair(args: IMouseEventArgs, id: string): void {
  if(id == "charts"){
    this.mousemoveEvent( document.getElementById("charts1"), args.x, window.screenTop+0, args.x, window.screenTop+90-window.scrollY);
    this.mousemoveEvent( document.getElementById("charts2"), args.x, window.screenTop+0, args.x, window.screenTop+610-window.scrollY);
    this.mousemoveEvent( document.getElementById("charts3"), args.x, window.screenTop+0, args.x, window.screenTop+920-window.scrollY);
    this.mousemoveEvent( document.getElementById("charts4"), args.x, window.screenTop+0, args.x, window.screenTop+1230-window.scrollY);
    this.mousemoveEvent( document.getElementById("charts5"), args.x, window.screenTop+0, args.x, window.screenTop+1540-window.scrollY);
  }

}

private 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);
}

score 0 · Answer 1 · answered Oct 22 '21 at 15:52

We request you to bind mousemove event for HTML element containing multiple charts. We have prepared sample based on your requirement. Please check with the below snippet and sample.

<div (mousemove)="onMouseMove($event)">
    <ejs-chart id='chartcontainer1'></ejs-chart>
    <ejs-chart id='chartcontainer2' ></ejs-chart>
</div>  
public onMouseMove(args){
    if (args.target.id.indexOf('ChartAreaBorder') > -1) {
       var chart1 = document.getElementById('chartcontainer1');
        this.container1Bounds = chart1.getBoundingClientRect();
        this.mousemoveEvent(
            chart1,
            args.x,
            this.container1Bounds.y + (this.container1Bounds.height/2),
            args.x,
            this.container1Bounds.y + (this.container1Bounds.height/2)
          );
        var chart2 = document.getElementById('chartcontainer2');
          this.container2Bounds = chart2.getBoundingClientRect();
          this.mousemoveEvent(
            chart2,
            args.x,
            this.container2Bounds.y + (this.container2Bounds.height/2),
            args.x,
            this.container2Bounds.y + (this.container2Bounds.height/2)
          );
    }
};

Sample : https://stackblitz.com/edit/angular-a5jyyk

Syncfusion chart synchronised crosshair - Angular

1 Answers1