# ApexChart Using onMouseEnter and onMouseLeave events

**URL:** <https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 22, 2025, 1:18pm UTC](https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647 "2025-10-22T13:18:52Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![brandon1](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@brandon1](https://forum.inductiveautomation.com/u/brandon1)\
**Post date:** [October 22, 2025, 1:18pm UTC](https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647/1 "2025-10-22T13:18:52Z")

</div>

Hello,

I am trying to wire up a message handler and a dom event from the new ApexCharts that are included in the Embr Charts module.

I have the following code as a message handler on my ApexChart:

```python
	# implement your handler here
	if "update" in payload:
		self.props.options.plotOptions.line.update = payload["update"]

```

I add the custom Boolean under the line property so that my binding for the series can update and not update when the mouse enters and leaves the chart.

I added javascript code under events→dom→onMouseEnter

```python
self.dispatch("hoverUpdateControl", {update: false});

```

I feel like I am missing something basic. I tried to check the forum for other examples but could not find any.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 23, 2025, 12:46am UTC](https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647/2 "2025-10-23T00:46:34Z")

</div>

> [@brandon1](#):
>
> `self.props.options.plotOptions.line.update`

I'm not sure what this prop does, I can't find it in the `ApexCharts` documentation. What are you expecting it to do?

Also, where did you get `self.dispatch("hoverUpdateControl", {update: false});` from?

Irregardless, I can help with the mouse events.

### 1. Using JavaScript in Props

In order to use JavaScript in an Embr-Charts props, it must be in the form of an arrow function:

```js
// events.dom.onMouseEnter
() => { console.log('onMouseEnter') }

```

> **[Scriptable Options | Musson Industrial](https://docs.mussonindustrial.com/ignition/embr-charts/components/apex-charts/scriptable-options/)**
>
> ApexCharts scriptable options are supported.

### 2. Sending a Message from JavaScript

To send a message from Embr's JavaScript context, you use `perspective.sendMessage(type, payload, scope)`:

#TODO: Add this to the docs.#

```js
// events.dom.onMouseEnter
() => { 
    console.log('onMouseEnter')

    const payload = {}
    perspective.sendMessage('onMouseEnter' , payload, 'view')
 }

```

However, you don't really need to get this fancy, you could be using the default component `Mouse Events/onMouseEnter` and `Mouse Events/onMouseLeave` events.

The advantage of Embr's dedicated `events` callbacks are that they run directly in the client. If you aren't using this feature, Ignition's regular event system will serve you just fine.

### 3. Setting a Property Directly from a DOM event

If you want to get fancy, you can set `props.options.plotOptions.line.update` directly from the client's DOM event.

This removes an update cycle from the interaction and is the most immediate way of setting a property.

```js
// events.dom.onMouseEnter
() => { 
    const path = 'options.plotOptions.line.update'
    this.store.props.write(path, true)
 }

// events.dom.onMouseLeave 
() => { 
    const path = 'options.plotOptions.line.update'
    this.store.props.write(path, false)
 }

```

---

<div class="post-metadata">

**Author:** ![brandon1](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@brandon1](https://forum.inductiveautomation.com/u/brandon1)\
**Post date:** [October 23, 2025, 12:00pm UTC](https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647/3 "2025-10-23T12:00:00Z")

</div>

Thank you Ben!

> [@bmusson](#):
>
> I'm not sure what this prop does, I can't find it in the `ApexCharts` documentation. What are you expecting it to do?

I added that Boolean property to trigger when my update would run on the series binding. I know it could have been on a custom property of the chart, but I was hoping to figure out option 3 that you presented which is a direct writing of the property.

> [@bmusson](#):
>
> Also, where did you get `self.dispatch("hoverUpdateControl", {update: false});` from?

Honestly this was from ChatGPT and I figured it was wrong but could not find a good example or explanation like you provided below.

> [@bmusson](#):
>
> However, you don't really need to get this fancy, you could be using the default component `Mouse Events/onMouseEnter` and `Mouse Events/onMouseLeave` events.

I also came to this conclusion and found it worked just fine. I still was hoping you would show me how the events worked in general for future reference.

> [@bmusson](#):
>
> To send a message from Embr's JavaScript context, you use `perspective.sendMessage(type, payload, scope)`:

Are there other functions like this one that you have not documented yet?

> [@bmusson](#):
>
> If you want to get fancy, you can set `props.options.plotOptions.line.update` directly from the client's DOM event.

For tricks like this, how do I find documentation of the functions available? I am very ignorant of the JavaScript language so I’m sure that is a big part of the problem.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 23, 2025, 12:10pm UTC](https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647/4 "2025-10-23T12:10:52Z")

</div>

> [@brandon1](#):
>
> Honestly this was from ChatGPT

In the future, declare this up front, for any LLM-generated material. Per the [forum rules](https://forum.inductiveautomation.com/faq).

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 23, 2025, 3:16pm UTC](https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647/5 "2025-10-23T15:16:26Z")

</div>

> [@brandon1](#):
>
> I was hoping to figure out option 3 that you presented which is a direct writing of the property

You can absolutely write to a custom property on the chart like this. Notice it's writing to the `custom` store instead of the `props` store.

```python
// events.dom.onMouseEnter
() => { 
    const path = 'isMouseHovered'
    this.store.custom.write(path, true)
 }

// events.dom.onMouseLeave 
() => { 
    const path = 'isMouseHovered'
    this.store.custom.write(path, false)
 }

```

This is what I'd recommend in order to keep extra stuff out the `ApexCharts` props. You don't want to be accidentally causing re-renders.

* * *

> [@brandon1](#):
>
> Honestly this was from ChatGPT and I figured it was wrong but could not find a good example or explanation like you provided below.

Gotcha. Yeah what Phil said, please lead with that, it makes it easier to find/disregard LLM hallucinations.

* * *

> [@brandon1](#):
>
> Are there other functions like this one that you have not documented yet?

Here's the source for the current scripting globals. The only other thing relevant for charting is the `context`.

> <https://github.com/mussonindustrial/embr/blob/f93d4be0e9e09a6afee5ccc3f07faeb76dcc816f/libraries/javascript/perspective-client/src/scripting/ScriptingGlobals.ts#L12-L24>

* * *

> [@brandon1](#):
>
> For tricks like this, how do I find documentation of the functions available? I am very ignorant of the JavaScript language so I’m sure that is a big part of the problem.

What I do is simply log the `this` context (which for Embr component props functions is the Perspective component itself).

```js
() => { 
   console.log(this)
 }

```

Then from the designer debugger you can explore the structure.

 ![20251023_111100](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/7/6732ee8d97ad9af978b8eccf0cc61cd60cc27b2e.png)

It should also be noted that you probably won't get much help from IA when delving into the JavaScript specifics. This is beyond normal use of components and is basically what IA is expecting only module developers to care about.

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [October 23, 2025, 6:15pm UTC](https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647/6 "2025-10-23T18:15:25Z")

</div>

> [@bmusson](#):
>
> ```python
> () => { 
> console.log(this)
> }
> 
> ```

😮 😮 😮

Now THAT is a gold nugget I wish I knew about months ago!

Thanks!

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 23, 2025, 6:16pm UTC](https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647/7 "2025-10-23T18:16:43Z")

</div>

`console.dir` is also pretty magical:

> **[console: dir() static method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/console/dir_static)**
>
> The console.dir() static method displays a list of the properties of the specified JavaScript object. In browser consoles, the output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [October 23, 2025, 6:17pm UTC](https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647/8 "2025-10-23T18:17:36Z")

</div>

Okay now you are pouring salt in the wound!

We should have a topic for little tricks like these.

I’m a vision guy through and through, so not knowing the little tricks like this has frustrated the hell out of me in Perspective.

Thanks!

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 23, 2025, 6:34pm UTC](https://forum.inductiveautomation.com/t/apexchart-using-onmouseenter-and-onmouseleave-events/111647/9 "2025-10-23T18:34:55Z")

</div>

You can also assign objects from the `console.log(this)` tree as global variables, in order to have access to a reference that you can script against directly in the console.

> **[Store as Global | Down and Dirty with Chrome Developer Tools](https://blittle.github.io/chrome-dev-tools/sources/store-as-global.html)**
>
> A deep dive into advanced functionality within the Chrome Developer tools that will enable you to more effectively build and debug web apps. Presented at the 2014 OpenWest Conference.