# Template node in UI Dashboard does not show ECharts? **URL:** https://discourse.nodered.org/t/template-node-in-ui-dashboard-does-not-show-echarts/12951 **Category:** Dashboard **Created:** [5 July 2019 12:41 UTC](https://discourse.nodered.org/t/template-node-in-ui-dashboard-does-not-show-echarts/12951 "2019-07-05T12:41:38Z") **Posts on this page:** 7 **Page:** 1
### Author: ![Tommy200907](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@Tommy200907](https://discourse.nodered.org/u/Tommy200907) #### Post date: [5 July 2019 12:41 UTC](https://discourse.nodered.org/t/template-node-in-ui-dashboard-does-not-show-echarts/12951/1 "2019-07-05T12:41:38Z")
I am trying to use EChart javascript component in the template node of UI Dashboard. The simple test code is as follows. The EChart component does not display in Web UI. Is the problem due to the usage of ng-style or something else? Test Start ``` ``` Test End ---
### 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: [5 July 2019 13:01 UTC](https://discourse.nodered.org/t/template-node-in-ui-dashboard-does-not-show-echarts/12951/2 "2019-07-05T13:01:34Z")
Are you seeing any errors in the browser dev console? ---
### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay) #### Post date: [5 July 2019 14:54 UTC](https://discourse.nodered.org/t/template-node-in-ui-dashboard-does-not-show-echarts/12951/3 "2019-07-05T14:54:00Z")
presumably you have loaded he echarts library via another global template ? ---
### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei) #### Post date: [5 July 2019 20:44 UTC](https://discourse.nodered.org/t/template-node-in-ui-dashboard-does-not-show-echarts/12951/4 "2019-07-05T20:44:40Z")
It should work if you : 1- Load the echarts library. If you are not loading it somewhere in you flow just add a new UI\_template node with below config. You need to specify the right path to you static folder in Node-RED where you store the file / library `echarts.min.js`. ![r-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b610d39bdd4c78906c014591be477358e995778d.png) 2- Add the missing div element in you ui\_template: ```auto
``` Voila ! ![r-02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/bde97ee474c4a1606101c0c0aa919a95e0f9b936.png) ---
### Author: ![Tommy200907](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@Tommy200907](https://discourse.nodered.org/u/Tommy200907) #### Post date: [8 July 2019 06:56 UTC](https://discourse.nodered.org/t/template-node-in-ui-dashboard-does-not-show-echarts/12951/5 "2019-07-08T06:56:49Z")
The problem is in the UI Template node from "node-red-dashboard", as in the attaced image. The EChart object seems to be created correctly. ![node](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0e10eb5bd1c44021546dced78d72c6bfdee0f5c9.png) ---
### Author: ![Tommy200907](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@Tommy200907](https://discourse.nodered.org/u/Tommy200907) #### Post date: [8 July 2019 07:09 UTC](https://discourse.nodered.org/t/template-node-in-ui-dashboard-does-not-show-echarts/12951/6 "2019-07-08T07:09:33Z")
Thanks Andrei. I tryied again with: style="width: 300px;height:200px;" then the Echart can be shown for my testing. So, the original problem was related to CSS style. ---
### Author: ![trihook](https://avatars.discourse-cdn.com/v4/letter/t/da6949/32.png) [@trihook](https://discourse.nodered.org/u/trihook) #### Post date: [10 October 2019 04:46 UTC](https://discourse.nodered.org/t/template-node-in-ui-dashboard-does-not-show-echarts/12951/7 "2019-10-10T04:46:00Z")
hi. do you know how to set echart value by msg.payload?