ApexChart Using onMouseEnter and onMouseLeave events

Ignition
,
1

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:

	# 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

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.

2

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:

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

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.#

// 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.

// 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)
 }
1 Like
3

Thank you Ben!

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.

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

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.

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

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.

4

In the future, declare this up front, for any LLM-generated material. Per the forum rules.

1 Like
5

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.

// 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.

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

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

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

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

Then from the designer debugger you can explore the structure.

20251023_111100
20251023_111100967×854 56.8 KB

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.

3 Likes
6

:open_mouth: :open_mouth: :open_mouth:

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

Thanks!

1 Like
7

console.dir is also pretty magical:

1 Like
8

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!

1 Like
9

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.

1 Like