# Musson Industrial’s Embr-Charts Module

**URL:** <https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618>\
**Category:** 3rd Party Modules\
**Tags:** perspective\
**Created:** [June 10, 2024, 12:53pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618 "2024-06-10T12:53:46Z")\
**Posts on this page:** 1\
**Showing post:** 164

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 6, 2025, 7:32pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/164 "2025-03-06T19:32:50Z")

</div>

If you are using chartjs for the second chart, you might be able to define a custom event listener on that chart and pass it a CustomEvent via `dispatchEvent`.

You could use that to transfer the necessary data from the main chart to the secondary chart. It would also bypass the round trip through the gateway.

Basic flow would be to add an item to the secondary chart's `props.plugins` with a definition for `install` that defines and attaches the event listener to the chart canvas. Most basic listener would look for new data in the event and shove that data into the `data.datasets` of the chart.

In your main chart's `props.options.onClick` definition, you would create a new CustomEvent that would contain the data you want to send, and maybe some other info to drive what the chart should do, and then pass this CustomEvent to the eventListener on the secondary chart.

> **[EventTarget: addEventListener() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)**
>
> The addEventListener() method of the EventTarget interface
> sets up a function that will be called whenever the specified event is delivered to the target.

> **[CustomEvent - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent)**
>
> The CustomEvent interface can be used to attach custom data to an event generated by an application.

> **[EventTarget: dispatchEvent() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent)**
>
> The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected
> event listeners in the appropriate order. The normal event processing
> rules (including the capturing and optional bubbling phase) also...

Including this which shows basic creation and attaching of eventListeners:

> [@\[BUG?\] Perspective Power Chart Bug - Embr-Chart as a Replacement?](https://forum.inductiveautomation.com/t/bug-perspective-power-chart-bug-embr-chart-as-a-replacement/102084/36):
>
> tada Yeah my first example didn't track the mouse very well. Here's a version that should be exactly 1-to-1 by using some Chart.js scale helpers (getPixelForValue and getValueForPixel). You'll have to add the mouse cursor stuff back in (or have Claude do it for you wink) (chart, event) =\> { if (event.event.type !== 'mousedown') return const { x: clickX, y: clickY } = event.event const scale = chart.scales.y if (clickX \> scale.right || clickX \< scale.left) return l…

---

_[View the full topic](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618)._