# Apexchart not working

**URL:** <https://discourse.nodered.org/t/apexchart-not-working/84080>\
**Category:** Dashboard\
**Created:** [28 December 2023 11:15 UTC](https://discourse.nodered.org/t/apexchart-not-working/84080 "2023-12-28T11:15:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![robertobuti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertobuti/32/81936_2.png) [@robertobuti](https://discourse.nodered.org/u/robertobuti)\
**Post date:** [28 December 2023 11:15 UTC](https://discourse.nodered.org/t/apexchart-not-working/84080/1 "2023-12-28T11:15:04Z")

</div>

Hello,  
i'm beginner on nodered and really not a sw engineer, i need a little help to use apexchart on my dash board, i'm working for the moment with a simple example.  
Here the flow i'm using.

```auto
[
    {
        "id": "884a673ddd60e8ec",
        "type": "ui_template",
        "z": "fb440a5f200684bb",
        "group": "46cbac0e09c696e8",
        "name": "",
        "order": 0,
        "width": "24",
        "height": "10",
        "format": "<html>\n \n<head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <!-- <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css\"> -->\n <!-- <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js\"></script> -->\n <!-- <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js\"></script> -->\n <script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n</head>\n\n<body>\n <div id=\"chart\" style=\"width:900px\"></div>\n <script> \n var options = {\n series: [{\n name: \"Desktops\",\n data: [10, 41, 35, 51, 49, 62, 69, 91, 148]\n }],\n chart: {\n type: 'line',\n height: 350,\n zoom: {\n type: 'x',\n enabled: true,\n autoScaleYaxis: true\n },\n toolbar: {\n autoSelected: 'zoom'\n }\n },\n dataLabels: {\n enabled: false\n },\n stroke: {\n curve: 'smooth'\n },\n markers: {\n size: 0,\n },\n title: {\n text: 'Tank temperature',\n align: 'left'\n },\n grid: {\n row: {\n colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns\n opacity: 0.5\n },\n },\n xaxis: {\n categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],\n }\n };\n setTimeout(()=> {\n\n var chart = new ApexCharts(document.querySelector(\"#chart\"), options);\n chart.render();\n },1000) \n </script>\n</body>\n\n</html>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 480,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "4f1f5d23f0bda5db",
        "type": "inject",
        "z": "fb440a5f200684bb",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": "1",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 220,
        "y": 120,
        "wires": [
            [
                "884a673ddd60e8ec"
            ]
        ]
    },
    {
        "id": "46cbac0e09c696e8",
        "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
    }
]

```

But the toolbar are icons blue, also graph is are blue instead simple line, any idea where i'm wrong ?  
thank in advance for any help / suggestion.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [28 December 2023 11:23 UTC](https://discourse.nodered.org/t/apexchart-not-working/84080/2 "2023-12-28T11:23:04Z")

</div>

> [@robertobuti](#):
>
> But the toolbar are icons blue,

Some css clash with the dashboard's styles  
Try **"Use Anglular theme in ui\_template"**

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91264a0351de471120e78dd4d645857ecc70f767.png)

---

<div class="post-metadata">

**Author:** ![robertobuti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertobuti/32/81936_2.png) [@robertobuti](https://discourse.nodered.org/u/robertobuti)\
**Post date:** [28 December 2023 12:01 UTC](https://discourse.nodered.org/t/apexchart-not-working/84080/3 "2023-12-28T12:01:29Z")

</div>

Great,  
thank a lot, now is working.  
r.

---

<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:** [11 January 2024 12:02 UTC](https://discourse.nodered.org/t/apexchart-not-working/84080/4 "2024-01-11T12:02:10Z")

</div>

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