# How do I configure Echarts in Dashboard 2 in my intranet?

**URL:** <https://discourse.nodered.org/t/how-do-i-configure-echarts-in-dashboard-2-in-my-intranet/97889>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [1 July 2025 04:48 UTC](https://discourse.nodered.org/t/how-do-i-configure-echarts-in-dashboard-2-in-my-intranet/97889 "2025-07-01T04:48:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hyxdxhb1231](https://avatars.discourse-cdn.com/v4/letter/h/65b543/32.png) [@hyxdxhb1231](https://discourse.nodered.org/u/hyxdxhb1231)\
**Post date:** [1 July 2025 04:48 UTC](https://discourse.nodered.org/t/how-do-i-configure-echarts-in-dashboard-2-in-my-intranet/97889/1 "2025-07-01T04:48:32Z")

</div>

How to configure Echarts in the intranet with the ui-template of dashboard2.0? And update the data via msg.payload, no CDN is required

---

<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:** [1 July 2025 05:07 UTC](https://discourse.nodered.org/t/how-do-i-configure-echarts-in-dashboard-2-in-my-intranet/97889/2 "2025-07-01T05:07:57Z")

</div>

Hi welcome to the forum.

You can serve what the cdn serves yourself using an endpoint (http in \> file \> http response) or setup httpStatic to host it.

---

<div class="post-metadata">

**Author:** ![hyxdxhb1231](https://avatars.discourse-cdn.com/v4/letter/h/65b543/32.png) [@hyxdxhb1231](https://discourse.nodered.org/u/hyxdxhb1231)\
**Post date:** [1 July 2025 05:25 UTC](https://discourse.nodered.org/t/how-do-i-configure-echarts-in-dashboard-2-in-my-intranet/97889/3 "2025-07-01T05:25:50Z")

</div>

[  
{  
"id": "4acfc4addde50179",  
"type": "ui-template",  
"z": "69594495cf1ea8a1",  
"group": "67172933099081b6",  
"page": "",  
"ui": "",  
"name": "",  
"order": 1,  
"width": 0,  
"height": 0,  
"head": "",  
"format": "\<script src="/echarts.min.js"\>\n\<div id="main" style="height: 300px; width: 300px;"\>\n",  
"storeOutMessages": true,  
"passthru": true,  
"resendOnRefresh": true,  
"templateScope": "local",  
"className": "",  
"x": 680,  
"y": 780,  
"wires": [  
  
]  
},  
{  
"id": "67172933099081b6",  
"type": "ui-group",  
"name": "Demo",  
"page": "e3a1a003d3c5fd05",  
"width": "6",  
"height": "8",  
"order": 1,  
"showTitle": true,  
"className": "",  
"visible": "true",  
"disabled": "false"  
},  
{  
"id": "e3a1a003d3c5fd05",  
"type": "ui-page",  
"name": "Demo",  
"ui": "8edbf6ce4adcc8cd",  
"path": "/demo",  
"icon": "home",  
"layout": "grid",  
"theme": "e2eca06675f8744b",  
"breakpoints": [  
{  
"name": "Default",  
"px": "0",  
"cols": "3"  
},  
{  
"name": "Tablet",  
"px": "576",  
"cols": "6"  
},  
{  
"name": "Small Desktop",  
"px": "768",  
"cols": "9"  
},  
{  
"name": "Desktop",  
"px": "1024",  
"cols": "12"  
}  
],  
"order": 10,  
"className": "",  
"visible": true,  
"disabled": false  
},  
{  
"id": "8edbf6ce4adcc8cd",  
"type": "ui-base",  
"name": "My Dashboard",  
"path": "/dashboard",  
"appIcon": "",  
"includeClientData": true,  
"acceptsClientConfig": [  
"ui-notification",  
"ui-control"  
],  
"showPathInSidebar": false,  
"headerContent": "page",  
"navigationStyle": "default",  
"titleBarStyle": "default",  
"showReconnectNotification": true,  
"notificationDisplayTime": 1,  
"showDisconnectNotification": true,  
"allowInstall": true  
},  
{  
"id": "e2eca06675f8744b",  
"type": "ui-theme",  
"name": "pcba-theme",  
"colors": {  
"surface": "#1e1e1e",  
"primary": "#0094ce",  
"bgPage": "#121212",  
"groupBg": "#1e1e1e",  
"groupOutline": "#333333"  
},  
"sizes": {  
"density": "comfortable",  
"pagePadding": "20px",  
"groupGap": "20px",  
"groupBorderRadius": "8px",  
"widgetGap": "15px"  
}  
}  
]

As you see,when I put it on node-red, it will show “echarts is not defined”, I don't know how to solve it

---

<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:** [1 July 2025 05:37 UTC](https://discourse.nodered.org/t/how-do-i-configure-echarts-in-dashboard-2-in-my-intranet/97889/4 "2025-07-01T05:37:45Z")

</div>

Firstly:

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````)

````auto
``` 
   code goes here 
```

````

You can edit and correct your post by clicking the pencil ✏ icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

Next: are you serving echarts? If yes how?

Lastly: your template doesn't look right. You should try to adapt a working vue demo like this one: [How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl](https://discourse.nodered.org/t/how-to-configure-echarts-in-dashboard-2/87259/4)

---

<div class="post-metadata">

**Author:** ![hyxdxhb1231](https://avatars.discourse-cdn.com/v4/letter/h/65b543/32.png) [@hyxdxhb1231](https://discourse.nodered.org/u/hyxdxhb1231)\
**Post date:** [1 July 2025 05:47 UTC](https://discourse.nodered.org/t/how-do-i-configure-echarts-in-dashboard-2-in-my-intranet/97889/5 "2025-07-01T05:47:46Z")

</div>

```auto
[
    {
        "id": "4acfc4addde50179",
        "type": "ui-template",
        "z": "69594495cf1ea8a1",
        "group": "67172933099081b6",
        "page": "",
        "ui": "",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<script src=\"/echarts.min.js\"></script>\n<div id=\"main\" style=\"height: 300px; width: 300px;\"></div>\n<script>\n var chartDom = document.getElementById('main');\n\nvar myChart = echarts.init(chartDom);\nvar option;\n\noption = {\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value'\n },\n series: [{\n data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(180, 180, 180, 0.2)'\n }\n }]\n};\n\noption && myChart.setOption(option);\n\n</script>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 680,
        "y": 780,
        "wires": [
            []
        ]
    },
    {
        "id": "67172933099081b6",
        "type": "ui-group",
        "name": "Demo",
        "page": "e3a1a003d3c5fd05",
        "width": "6",
        "height": "8",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "e3a1a003d3c5fd05",
        "type": "ui-page",
        "name": "Demo",
        "ui": "8edbf6ce4adcc8cd",
        "path": "/demo",
        "icon": "home",
        "layout": "grid",
        "theme": "e2eca06675f8744b",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 10,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "8edbf6ce4adcc8cd",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "e2eca06675f8744b",
        "type": "ui-theme",
        "name": "pcba-theme",
        "colors": {
            "surface": "#1e1e1e",
            "primary": "#0094ce",
            "bgPage": "#121212",
            "groupBg": "#1e1e1e",
            "groupOutline": "#333333"
        },
        "sizes": {
            "density": "comfortable",
            "pagePadding": "20px",
            "groupGap": "20px",
            "groupBorderRadius": "8px",
            "widgetGap": "15px"
        }
    }
]

```

As you see,when I put it on node-red, it will show “echarts is not defined”, I don't know how to solve it

---

<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:** [1 July 2025 06:03 UTC](https://discourse.nodered.org/t/how-do-i-configure-echarts-in-dashboard-2-in-my-intranet/97889/6 "2025-07-01T06:03:57Z")

</div>

> [@hyxdxhb1231](#):
>
> I don't know how to solve it

Please answer question otherwise I cannot help

> [@Steve-Mcl](#):
>
> are you serving echarts? If yes how?

Also, as I said before:

> [@Steve-Mcl](#):
>
> your template doesn't look right. You should try to adapt a working vue demo like this one: [How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl](https://discourse.nodered.org/t/how-to-configure-echarts-in-dashboard-2/87259/4)

---

<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 July 2025 06:04 UTC](https://discourse.nodered.org/t/how-do-i-configure-echarts-in-dashboard-2-in-my-intranet/97889/7 "2025-07-31T06:04:02Z")

</div>

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