# How to import the js file locally and why does the chartzoom register failed at second time?

**URL:** https://discourse.nodered.org/t/how-to-import-the-js-file-locally-and-why-does-the-chartzoom-register-failed-at-second-time/98705
**Category:** Dashboard
**Tags:** chart
**Created:** [17 August 2025 11:36 UTC](https://discourse.nodered.org/t/how-to-import-the-js-file-locally-and-why-does-the-chartzoom-register-failed-at-second-time/98705 "2025-08-17T11:36:16Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Kang](https://avatars.discourse-cdn.com/v4/letter/k/d6d6ee/32.png) [@Kang](https://discourse.nodered.org/u/Kang)
#### Post date: [17 August 2025 11:36 UTC](https://discourse.nodered.org/t/how-to-import-the-js-file-locally-and-why-does-the-chartzoom-register-failed-at-second-time/98705/1 "2025-08-17T11:36:16Z")

</div>

Hi,

I have this code using chartjs and chartjs-plugin-zoom.

I met two problems:

1. I can not load the hammerjs, chartjs and plugin-zoom js by local folder, I already downloaded three js files and put them at the node-red/lib folder, and using the script below, it did not work as I expected. I checked other topics regarding offline cdn access, something need to be done in the settings.js, but I did not find the settings.js in node-red folder, only package.json,flows.json file like below:

2. Every time I refresh the front end web page, the code line Chart.register(ChartZoom) will occur the error showed ChartZoom is not defined. However, if I do not put Chart.register(ChartZoom) in the mounted(), the chart can not be zoomed;

```flows
<template>
  <div class="chart-container">
    <v-btn
    @click="resetZoom" 
    id="resetZoomBtn" 
    class="reset-btn">Reset</v-btn>
    <canvas 
    id="myChart" 
    class="chart-canvas"></canvas>
  </div>
</template>

<style scoped>
    .chart-container {
        width: 100%;
        height: 100%;
        position: relative;
        padding-top: 80px;
    }

    .chart-canvas {
        width: 100% !important;
        height: 100% !important;
    }

    .reset-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
    }
</style>
<!-- 
<script type="text/javascript" src="lib/hammer.min.js"></script>
<script type="text/javascript" src="lib/chart.umd.min.js"></script>
<script type="text/javascript" src="lib/chartjs-plugin-zoom.min.js"></script>
-->
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1"></script>

<script>
export default {
    data() {
        return {
            myChart: null
        }
    },
    mounted() {
        try {
        Chart.register(ChartZoom);
        } catch(e) {
            console.warn('ChartZoom register failed!', e);
        }
        
        const ctx = document.getElementById('myChart').getContext('2d');
        this.myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: '',
                    data: [{ x: 1, y: 5 },
                    { x: 2, y: 10 },
                    { x: 3.5, y: 6 },
                    { x: 4, y: 2 },
                    { x: 3, y: 8 }],
                    borderColor: 'rgb(127, 147, 164)',
                    showLine: true,
                    pointRadius: 0,
                    tension: 0.1
                }]
            },
            options: {
                
                responsive: true,
                interaction: { mode: 'nearest', intersect: true },
                scales: {
                    x: { type: 'linear', title: { display: true, text: 'Position[mm]' } },
                    y: { type: 'linear', title: { display: true, text: 'Force[N]' } }
                },
                plugins: {
                    legend:{display:false},
                    zoom: {
                        pan: { enabled: true, mode: 'xy' },
                        zoom: { wheel: { enabled: true }, pinch: { enabled: true }, mode: 'xy' }
                    }
                }
            }
        });
    },
    watch: {
            msg: function () 
            {
                if(this.msg.topic===("POS/FORCE"))
                {
                    this.updateCurve(this.msg.payload);
                }
            },
            deep:true
        },
    methods: {
        updateCurve: function (payload) 
        {
            if (Array.isArray(payload)) {
                this.myChart.data.datasets[0].data = payload;
                this.myChart.resetZoom();
                this.myChart.update();
                
            }
        },
        resetZoom() {
            if (this.myChart) {
                this.myChart.resetZoom();
            }
        }
    },
    unmounted() {
        if (this.myChart) {
            this.myChart.destroy();
        }
    }
}
</script>

```

---

<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: [17 August 2025 11:47 UTC](https://discourse.nodered.org/t/how-to-import-the-js-file-locally-and-why-does-the-chartzoom-register-failed-at-second-time/98705/2 "2025-08-17T11:47:29Z")

</div>

> [@Kang](#):
>
> I can not load the hammerjs, chartjs and plugin-zoom js by local folder

You have to "serve" the files. You can do this using [http-in ~ http-response](https://cookbook.nodered.org/http/serve-a-local-file) nodes or adding [httpStatic](https://nodered.org/docs/user-guide/runtime/configuration) settings

---

<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: [17 August 2025 12:04 UTC](https://discourse.nodered.org/t/how-to-import-the-js-file-locally-and-why-does-the-chartzoom-register-failed-at-second-time/98705/3 "2025-08-17T12:04:23Z")

</div>

> [@Kang](#):
>
> Every time I refresh the front end web page, the code line Chart.register(ChartZoom) will occur the error showed ChartZoom is not defined

The documentation details how you should wait for the external lib to be loaded: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template#loading-external-dependencies)

---

<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: [17 August 2025 12:45 UTC](https://discourse.nodered.org/t/how-to-import-the-js-file-locally-and-why-does-the-chartzoom-register-failed-at-second-time/98705/4 "2025-08-17T12:45:44Z")

</div>

> [@Kang](#):
>
> I can not load the hammerjs, chartjs and plugin-zoom js by local folder

To clarify the reason that you have to serve them, that code is running in the browser. The browser may be running on a machine the other side of the world and so cannot directly access the folder on the node-red server.

---

<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: [31 August 2025 12:46 UTC](https://discourse.nodered.org/t/how-to-import-the-js-file-locally-and-why-does-the-chartzoom-register-failed-at-second-time/98705/5 "2025-08-31T12:46:41Z")

</div>

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