title: Syncfusion chart synchronised crosshair - Angular
body: <p>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:</p>
  <p><a href="https://www.syncfusion.com/forums/164787/synchronise-crosshair-trackball-in-multiple-charts" rel="nofollow noreferrer">https://www.syncfusion.com/forums/164787/synchronise-crosshair-trackball-in-multiple-charts</a></p>
  <p>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)</p>
  <pre><code>public syncronisedCrosshair(args: IMouseEventArgs, id: string): void {
    if(id == &quot;charts&quot;){
      this.mousemoveEvent( document.getElementById(&quot;charts1&quot;), args.x, window.screenTop+0, args.x, window.screenTop+90-window.scrollY);
      this.mousemoveEvent( document.getElementById(&quot;charts2&quot;), args.x, window.screenTop+0, args.x, window.screenTop+610-window.scrollY);
      this.mousemoveEvent( document.getElementById(&quot;charts3&quot;), args.x, window.screenTop+0, args.x, window.screenTop+920-window.scrollY);
      this.mousemoveEvent( document.getElementById(&quot;charts4&quot;), args.x, window.screenTop+0, args.x, window.screenTop+1230-window.scrollY);
      this.mousemoveEvent( document.getElementById(&quot;charts5&quot;), args.x, window.screenTop+0, args.x, window.screenTop+1540-window.scrollY);
    }
  </code></pre>
  <p>}</p>
  <pre><code>private mousemoveEvent(element, sx, sy, cx, cy) {
    let mousemove = document.createEvent(&quot;MouseEvent&quot;);
    mousemove.initMouseEvent( &quot;mousemove&quot;, true, false, window, 1, sx, sy, cx, cy, false, false, false, false, 0, null);
    element.dispatchEvent(mousemove);
  }
  </code></pre>