How to Synchronized Hover Between EJ2 JavaScript Charts?

3 mins read

This article shows how to synchronize hover interactions between two EJ2 Charts in JavaScript Charts, so that hovering over a series/point in one chart highlights the corresponding cluster in another chart. We achieve this by listening to the chartMouseMove event on the first chart and programmatically dispatching a mousemove event to the second chart.

How it works

Listen to chartMouseMove on the “source” chart.
When the mouse is over a series element, compute the matching element id in the “target” chart.
Calculate screen coordinates relative to the target chart’s bounding box.
Dispatch a synthetic mousemove to the target chart element to trigger its hover behavior.

Code Example

function dispatchChartMouseMove(element, sx, sy, cx, cy) {
 if (!element) return;
 const evt = document.createEvent('MouseEvent');
 evt.initMouseEvent(
   'mousemove',
   true, // canBubble
   false, // cancelable
   window,
   1, // detail
   sx,
   sy, // screenX, screenY
   cx,
   cy, // clientX, clientY
   false,
   false,
   false,
   false, // modifier keys
   0, // button
   null
 );
 element.dispatchEvent(evt);
}

// Chart A (container: #charts) -> sends hover to Chart B (#charts1)
const chartA = new ej.charts.Chart({

 chartMouseMove: function (args) {
   if (!args.target || args.target.indexOf('_Series_') === -1) return;

   // Map element id from #charts to #charts1
   const targetElementId = args.target.replace('charts', 'charts1');
   const targetElement = document.getElementById(targetElementId);
   if (!targetElement) return;

   const bounds = document.getElementById('charts1').getBoundingClientRect();
   const cy = bounds.y + bounds.height / 2;
   dispatchChartMouseMove(targetElement, args.x, cy, args.x, cy);
 },
});
chartA.appendTo('#charts');

// Chart B (container: #charts1) -> sends hover to Chart A (#charts)
const chartB = new ej.charts.Chart({

 chartMouseMove: function (args) {
   if (!args.target || args.target.indexOf('_Series_') === -1) return;

   // Map element id from #charts1 to #charts
   const targetElementId = args.target.replace('charts1', 'charts');
   const targetElement = document.getElementById(targetElementId);
   if (!targetElement) return;

   const bounds = document.getElementById('charts').getBoundingClientRect();
   const cy = bounds.y + bounds.height / 2;
   dispatchChartMouseMove(targetElement, args.x, cy, args.x, cy);
 },
});
chartB.appendTo('#charts1');

Output

Sample

StackBlitz Sample

Conclusion

I hope you enjoyed learning about how to synchronized hover between EJ2 Charts in ASP.NET Core Charts.

You can refer to our ASP.NET Core Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Documentation to understand how to present and manipulate data.

For current customers, you can check out our ASP.NET Core components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our ASP.NET Core Chart and other ASP.NET Core components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)