# Ui-template with chart.js/eCharts - vue lifecycle hooks

**URL:** <https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-template\
**Created:** [6 September 2025 13:30 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971 "2025-09-06T13:30:19Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [6 September 2025 13:30 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971/1 "2025-09-06T13:30:19Z")

</div>

Hello:

I recently updated my flows from Dashboard1 to Dashboard2. In the process I migrated all my charts to chart.js (I already had some in DB1 but had others that were native DB1 charts). And because I’m a sucker for punishment, after getting all the chart.js charts working, I also converted them to eCharts! All this was with a lot of trial and error and help from ChartGPT/Gemini AI as I have no knowledge of vue/limited html and CSS (just enough to meet my needs).

All charts are working as expected, but I am now seeing MaxListenersExceededWarning (s) in the Node-RED log and I’m wondering if this is related to my ui-template code. Below is the section of the code that is pretty much the same for all the charts (total of 10-12) of them on different ui-pages.

```auto
export default {
        data() {
            return {
                myChart: null,
                resizeHandler: null,
            };
        },
        //---Watch Section---
        watch: {
            msg: function () {
                if (this.msg && this.msg.topic === "data" && this.myChart && this.msg.payload && this.msg.payload.labels) {
                    const p = this.msg.payload;
                    this.update(p.labels, p, this.msg.title,this.msg.legend); // remember to add back this.msg.colors
                }
            }
        },
        //---Mounted Section---
        mounted() {
        this.$nextTick(() => {
            const ready = setInterval(() => {
                const container = this.$refs.charttpw33;
                if (window.echarts && container && container.offsetWidth > 0 && container.offsetHeight > 0) {
                    clearInterval(ready);
                    this.init();
                    if (this.msg && this.msg.topic === "data" && this.msg.payload) {
                        const p = this.msg.payload;this.update(p.labels, p, this.msg.title,this.msg.legend); /*remember to add back this.msg.colors*/
                    }
                    this.resizeHandler = () => { if (this.myChart) this.myChart.resize(); };
                    window.addEventListener('resize', this.resizeHandler);
                    setTimeout(() => { if (this.myChart) this.myChart.resize(); }, 300);
                    }
                }, 100);
            });
        },
        //---Before Destroy Section---
        beforeDestroy() {
            if (this.myChart) {
                this.myChart.dispose();
            }
            if (this.resizeHandler) {
                window.removeEventListener('resize', this.resizeHandler);
            }
        },

```

In reading the Flowfuse documentation, it appears that beforeDestroy() is not one of the supported VueJS API and may be causing the listeners to remain open? Should this be replaced by unmounted()? Any other suggestions for improvement would also be really appreciated. Thanks for your help.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 September 2025 14:20 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971/2 "2025-09-06T14:20:07Z")

</div>

> [@rakgupta](#):
>
> In reading the Flowfuse documentation, it appears that beforeDestroy() is not one of the supported VueJS API and may be causing the listeners to remain open? Should this be replaced by unmounted()

Easiest way to understand what is happening is to litter your code with `console.log('...')` etc.

I've not tried but you could likely also watch the route:

```auto
export default {
  mounted() {

  },
  unmounted() {
    this.cleanup()
  },
  watch: {
    $route(to, from) {
      this.cleanup()
    }
  },
  methods: {
    cleanup() {
      // do clean up
    }
  }
}

```

But, i would just try unmounted - if it works great, if not, look/ask for alternatives.

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [6 September 2025 14:53 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971/3 "2025-09-06T14:53:16Z")

</div>

> [@Steve-Mcl](#):
>
> i would just try unmounted

Thanks - I changed it to “unmounted” and threw in a the console.log statements. It looks like it is going through and doing the clean up. Will make the change to all and see if the warning goes away.

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [6 September 2025 20:26 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971/4 "2025-09-06T20:26:06Z")

</div>

Well… I’m still seeing the warning but it comes almost as soon as I launch the dashboard (localhost:1880/dashboard) and it goes to the first tab. Based on some googling, I added the following to my settings.js file r`equire('events').EventEmitter.defaultMaxListeners = 12;` and now I don’t see the warning.

Am I just masking the issue? I have no clue as to what may be causing this…

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 September 2025 20:35 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971/5 "2025-09-06T20:35:06Z")

</div>

Perhaps relevant: [MaxEventListener Warning · Issue #1620 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/1620)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [6 September 2025 20:38 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971/6 "2025-09-06T20:38:39Z")

</div>

> [@rakgupta](#):
>
> I’m still seeing the warning but it comes almost as soon as I launch the dashboard

Is that after a node-red restart?

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [6 September 2025 20:40 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971/7 "2025-09-06T20:40:32Z")

</div>

> [@Colin](#):
>
> Is that after a node-red restart?

Yes.. restarted multiple times. After adding that last line to increase the max listeners (to 12), I ‘m not seeing it any more.

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [6 September 2025 20:41 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971/8 "2025-09-06T20:41:42Z")

</div>

> [@Steve-Mcl](#):
>
> Perhaps relevant:

Thanks for adding this thread to the issue. I will track it as well.. hopefully it gets addressed down the line 🤞🏼

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 October 2025 20:41 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971/9 "2025-10-06T20:41:47Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.