# KyvisLabs ApexChart Event Handlers

**URL:** <https://forum.inductiveautomation.com/t/kyvislabs-apexchart-event-handlers/53540>\
**Category:** 3rd Party Modules\
**Created:** [November 29, 2021, 5:59pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-event-handlers/53540 "2021-11-29T17:59:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [November 29, 2021, 5:59pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-event-handlers/53540/1 "2021-11-29T17:59:27Z")

</div>

@kyvislabs  
Splintering off of [this thread](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/54) I need to get some advice/tips from the devs or anyone who has had success using the `animationEnd`, `mounted`, and `updated` event handlers on the apex chart components of this module.

I’m trying to set a view custom property once chart updates are finished loading, as occasionally my chart data my take a little while to render. During the interim, I use the view custom prop to show a loading graphic superimposed on the chart. However, in testing, the handlers mentioned above all only fire once when the view is loaded, but none ever fire again, regardless of whether the chart series or options are updated at runtime.

According to the [docs](https://apexcharts.com/docs/options/chart/events/) the `animationEnd` and `mounted` handlers behave as I would expect. The `updated` handler is what I would expect to fire when the chart data is updated. The reference mentions this `updated` function fires when the `updateOptions()` or `updateSeries()` functions are called, but I do not see any way to do this with the apex chart component.

---

<div class="post-metadata">

**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\
**Post date:** [April 19, 2022, 10:00am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-event-handlers/53540/2 "2022-04-19T10:00:11Z")

</div>

I don’t think you can access those…

---

<div class="post-metadata">

**Author:** ![richardNZ15](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richardnz15/32/33373_2.png) [@richardNZ15](https://forum.inductiveautomation.com/u/richardNZ15)\
**Post date:** [January 30, 2023, 10:28pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-event-handlers/53540/5 "2023-01-30T22:28:27Z")

</div>

These event handlers can be utilized if the appropriate config settings are set:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9e871105f795841b5437b2031c42f116eca96a0c.png)

I am having issues trying to get the right behavior. I have 6 different series on this chart, and i have two series i would like to show / hide depending on the View parameters.  
I would like these view parameters to be examined after the data has been refreshed by the data binding, but **not if the update event is fired due to toggling the series manually**.

* * *

Event handlers tested:

**animationEnd**

> Fires when the chart’s initial animation is finished

This gives me the functionality i want, but it looks a bit average to show the series animation, then quickly hide the series. Ideally it wouldn't show on the View at all.

**beforeMount**

> Fires before the chart has been drawn on screen

This works, but only seems to be fired on load of View.  
If data on chart is updated, it does **not fire again.**

**mounted**

> Fires after the chart has been drawn on screen

This works, but only seems to be fired on load of View.  
If data on chart is updated, it does **not fire again.**

**updated**

> Fires when the chart has been dynamically updated either with [updateOptions()](https://apexcharts.com/docs/methods/#updateOptions) or [updateSeries()](https://apexcharts.com/docs/methods/#updateSeries) function

Kinda works, but if i toggle the series myself, it will fire "updateSeries()" and then force the series off based on the parameter value which is not ideal.

* * *

Any thoughts on how to handle this better?  
ie: Using View parameters to set the initial state of an Apex Chart series, while still allowing it to be updated via the Apex Chart legend clicking?

---

<div class="post-metadata">

**Author:** ![flavien](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flavien](https://forum.inductiveautomation.com/u/flavien)\
**Post date:** [October 24, 2023, 1:43pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-event-handlers/53540/6 "2023-10-24T13:43:34Z")

</div>

Hi,

Is it possible to show a specific message or a loading bar (or an hourglass, whatever ... ) during a serie update ?