# Apexcharts how to add js scripts **URL:** \ **Category:** General\ **Created:** [17 August 2021 08:40 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825 "2021-08-17T08:40:13Z")\ **Posts on this page:** 10\ **Page:** 1

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\ **Post date:** [17 August 2021 08:40 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/1 "2021-08-17T08:40:13Z")

Hi, I've been trying to make apexcharts to work on the dashboard via template + ui\_template nodes. The chart works only the first time after deploy, afterwards it does not. Heres the flow: ```auto [{"id":"320dd3f4.959a0c","type":"ui_template","z":"d7ed593d.5dede8","group":"44218e32.34a34","name":"","order":0,"width":"24","height":"10","format":"","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":480,"y":60,"wires":[[]]},{"id":"f2298587.17ad98","type":"inject","z":"d7ed593d.5dede8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":120,"y":60,"wires":[["cccc681a.03f018"]]},{"id":"cccc681a.03f018","type":"template","z":"d7ed593d.5dede8","name":"apex timeline","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"\n \n \n \n \n \n \n \n \n

\n \n \n\n\n\n\n","output":"str","x":290,"y":60,"wires":[["320dd3f4.959a0c"]]},{"id":"44218e32.34a34","type":"ui_group","name":"1","tab":"27c6cdce.0f2ff2","order":1,"disp":true,"width":"30","collapse":false},{"id":"27c6cdce.0f2ff2","type":"ui_tab","name":"DA","icon":"dashboard","order":1,"disabled":false,"hidden":false}] ``` There is virtualy no info whatsoever how to implement other chart into existing dashboard. No tutorial, no explanations no nothing. This has started to get really frustrating - the problem is I only have basic js knowledge and thats it. I have copied the code (more or less) from this video: [Node-red:Apex Chart - YouTube](https://www.youtube.com/watch?v=Yv3FKxQwye4&t=1223s) This is the only "tutorial" on internet I could find. This is the error message I'm keep ketting: ```auto VM1837:158 Uncaught ReferenceError: ApexCharts is not defined at :158:27 at b (app.min.js:20) at He (app.min.js:20) at S.fn.init.append (app.min.js:20) at S.fn.init. (app.min.js:20) at $ (app.min.js:20) at S.fn.init.html (app.min.js:20) at app.min.js:592 at m.$digest (app.min.js:174) at m.$apply (app.min.js:177) ``` Please can anybody help me with this one, and also with a possible solution to import scripts from local storage (C:\apexcharts-bundle\dist) Thank you very much in advance ---

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\ **Post date:** [17 August 2021 10:39 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/2 "2021-08-17T10:39:04Z")

> [@nerevar](#): > > There is virtualy no info whatsoever how to implement other chart into existing dashboard That isn't what Dashboard is for. It is aimed at people with no html/js experience and enables them to have a UI simply by providing nodes in Node-RED flows. If you want a custom UI, you may wish to try uibuilder. > [@nerevar](#): > > Please can anybody help me with this one It is helpful to share the ui\_template code directly not just the flow file (since that takes time to paste into NR and tidy up afterwards). If I am reading the raw flow correctly, I think you have assumed that the ui\_template needs to have a full HMTL file. But the ui\_template node is just a snippet that is inserted into the Dashboard page. > [@nerevar](#): > > a possible solution to import scripts from local storage (C:\apexcharts-bundle\dist) All you need to do is put the script file into the folder you have declared in settings.js as the static resources folder. ---

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\ **Post date:** [17 August 2021 11:14 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/3 "2021-08-17T11:14:58Z")

Thanks for answering. Since this is only my sidejob I can't afford to dedicate more time to develop my dashboard in uibuilder - my backup json has got 1,5mb. Version 2.0 will be made in uibuilder I would like to use inject + template + (empty)ui\_template beucase later I need to add sockets and append data arrays. Template code: ```auto

``` Can I ask a bit more help with this one? > [TotallyInformation](https://discourse.nodered.org/u/TotallyInformation) > All you need to do is put the script file into the folder you have declared in settings.js as the static resources folder. Not sure where is settings.js static resources folder declared: here: `//userDir: '/home/nol/.node-red/',` here: `//nodesDir: '/home/nol/.node-red/nodes',` or here: `//httpStatic: '/home/nol/node-red-static/',` ? So, do I need to move all js files from apexcharts and chartjs to one folder? One more question: This is the error messages after installing apexcharts or chartjs locally: ```auto npm install chart.js npm WARN saveError ENOENT: no such file or directory, open '/home/pi/package.json' npm WARN enoent ENOENT: no such file or directory, open '/home/pi/package.json' npm WARN pi No description npm WARN pi No repository field. npm WARN pi No README data npm WARN pi No license field. + chart.js@3.5.0 added 1 package and audited 106 packages in 5.488s 1 package is looking for funding run `npm fund` for details found 7 vulnerabilities (3 moderate, 3 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details ``` Not sure what does it mean and how to fix it? ---

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\ **Post date:** [17 August 2021 11:54 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/4 "2021-08-17T11:54:56Z")

> [@nerevar](#): > > I would like to use inject + template + (empty)ui\_template beucase later I need to add sockets and append data arrays. I think you may be over-complecating things. You can use \>1 ui\_template. Use 1 for anything static like attaching the external scripts - don't send anything to that, just have it as a stand-alone node. Another ui\_template node can then be used to handle sending of data. However, remember that all of the data processing happening in the front-end is embedded within the Angular v1 app. So you can't just send some data and expect it to magically appear like it does with the other Dashboard nodes (they handle the magic for you, the ui\_template node does not). I have some example code on my website and you can probably find it in the Cookbook as well. > [@nerevar](#): > > Template code: You don't need any of the html, head or body tags - these are part of the Dashboard framework. The css and external script links can go into the ui\_template that has no inputs as can the static div. That is because you only ever need to deal with it once. > [@nerevar](#): > > //httpStatic: '/home/nol/node-red-static/', That one > [@nerevar](#): > > So, do I need to move all js files from apexcharts and chartjs to one folder? You don't HAVE to, you may choose to. > [@nerevar](#): > > Not sure what does it mean and how to fix it? You appear to be trying to install to the Pi uses home folder. If you only need the files, either use them from a CDN has you have been doing or download them direct from GitHub. ---

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\ **Post date:** [18 August 2021 05:01 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/5 "2021-08-18T05:01:40Z")

> [@nerevar](#): > > `Uncaught ReferenceError: ApexCharts is not defined` im not sure but i think this happens because you are trying to create the chart before the dashboard elements are ready/drawn. maybe the developers of the dashboard can better explain if this is the case One possible workaround is to delay in a setTimeout of 1 second the drawing of your chart. **Test Flow:** ```auto [{"id":"320dd3f4.959a0c","type":"ui_template","z":"4895ea10b4ee9ead","group":"44218e32.34a34","name":"","order":0,"width":"24","height":"10","format":"\n\n\n \n \n \n \n \n\n\n\n

\n \n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":640,"y":1320,"wires":[[]]},{"id":"f2298587.17ad98","type":"inject","z":"4895ea10b4ee9ead","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":380,"y":1320,"wires":[["320dd3f4.959a0c"]]},{"id":"44218e32.34a34","type":"ui_group","name":"Apexchart","tab":"27c6cdce.0f2ff2","order":1,"disp":true,"width":"30","collapse":false},{"id":"27c6cdce.0f2ff2","type":"ui_tab","name":"DA","icon":"dashboard","order":1,"disabled":false,"hidden":false}] ``` ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/2/628fcb1604f2cb8d9887132396bb9e007cf7a5ed.png) ---

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\ **Post date:** [18 August 2021 06:09 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/6 "2021-08-18T06:09:48Z")

> [@UnborN](#): > > One possible workaround is to delay in a setTimeout of 1 second the drawing of your chart. It works every time now, thank you! The charts now loads immediatelly after redeploy. How to make it appear only on my input? ---

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\ **Post date:** [18 August 2021 06:12 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/7 "2021-08-18T06:12:51Z")

> [@TotallyInformation](#): > > All you need to do is put the script file into the folder you have declared in settings.js as the static resources folder. I have put the files in this folder: ```auto C:/Users/rtkl1/.node-red/node-red-static/ ``` But node-red still wont load the script with this line: ```auto ``` Http static: ```auto httpStatic: 'C:/Users/rtkl1/.node-red/node-red-static/', ``` ---

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\ **Post date:** [18 August 2021 09:37 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/8 "2021-08-18T09:37:32Z")

> [@nerevar](#): > > `` That will only work if the client browser is on the same device as the Node-RED server. ---

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\ **Post date:** [18 August 2021 12:41 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/9 "2021-08-18T12:41:34Z")

> [@nerevar](#): > > The charts now loads immediatelly after redeploy. By the way i later noticed that the NR dashboard theme was overriding the chart's svg fill css property. If you have this problem also, set in the dashboard Options to use **Angular theme**. ([source](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/6)) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/563503bec63bb7cd127c1a4b37cb62fe20e7efc0.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/159f4614bafd9a0404953c19fe190d19d72fbd8a.png) > [@nerevar](#): > > How to make it appear only on my input? Select the _ui\_template_ node in its Help tab the 2nd example code snippet, describes how you can `$watch` for incoming msgs. If you send a msg (to ui\_template) that has the same structure as your chart's `options` then it will be more easy to create and render a new chart with every new set of data. ---

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [1 September 2021 12:42 UTC](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/10 "2021-09-01T12:42:18Z")

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