# ApexChart- How to delete shades

**URL:** <https://discourse.nodered.org/t/apexchart-how-to-delete-shades/82871>\
**Category:** Dashboard\
**Tags:** apex-chart\
**Created:** [15 November 2023 09:38 UTC](https://discourse.nodered.org/t/apexchart-how-to-delete-shades/82871 "2023-11-15T09:38:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ALIEN](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alien/32/62198_2.png) [@ALIEN](https://discourse.nodered.org/u/ALIEN)\
**Post date:** [15 November 2023 09:38 UTC](https://discourse.nodered.org/t/apexchart-how-to-delete-shades/82871/1 "2023-11-15T09:38:54Z")

</div>

Hello friends, I hope you are doing well!  
I would appreciate it if help me to figure out how to remove shades out of my curves!  
Actually, my problem is when I inject data into chart the curves aren't clean! I mean I want to see curves without any shades. I read the documents [here](https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/) but I couldn't find a related parameter for adding/removing shades!

```auto
[
    {
        "id": "ba30230bdd7b910f",
        "type": "ui_template",
        "z": "c0c06963c97bbd82",
        "group": "7b79c772fbaab385",
        "name": "",
        "order": 1,
        "width": 20,
        "height": 13,
        "format": "<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n<div id=\"chart\"></div>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n var options = {\n series: msg.payload,\n chart: {\n type: 'line',\n stacked: false,\n height: 500,\n zoom: {\n type: 'x',\n enabled: true,\n autoScaleYaxis: true\n },\n // toolbar: {\n // autoSelected: 'zoom'\n // }\n },\n stroke: {\n curve: 'smooth',\n }\n ,\n dataLabels: {\n enabled: false\n },\n markers: {\n size: 0,\n },\n theme: {\n mode: 'dark' // dark , light\n },\n title: {\n text: 'Historic data',\n align: 'left'\n },\n //fill: {\n // type: 'gradient',\n // gradient: {\n // shadeIntensity: 0,\n // inverseColors: false,\n // opacityFrom: 0.5,\n // opacityTo: 0,\n // stops: [0, 90, 100]\n // },\n //},\n yaxis: {\n labels: {\n formatter: function (val) {\n return val;\n },\n },\n // title: {\n // text: 'Price'\n // },\n },\n xaxis: {\n type: 'datetime',\n },\n tooltip: {\n shared: false,\n y: {\n formatter: function (val) {\n return (val / 1000000).toFixed(0)\n }\n }\n }\n };\n\nsetTimeout( ()=> {\n\n if(scope.chart){\n scope.chart.updateOptions(options)\n }\n else {\n scope.chart = new ApexCharts(document.querySelector(\"#chart\"), options);\n scope.chart.render();\n }\n \n}, 1000)\n\n }\n });\n})(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 660,
        "y": 1080,
        "wires": [
            []
        ]
    },
    {
        "id": "331c581fae67856e",
        "type": "function",
        "z": "c0c06963c97bbd82",
        "name": "Chart | Apex",
        "func": "var msg1;\nvar msg2;\nvar apex_chart = [];\n\n\n\nvar chart = [{\n \"series\":[],\n \"labels\":[msg.filename],\n \"data\": []\n}];\n\n\n\nlet columns = 0;\n\nfor(var series in msg.payload[0]) {\n if(series!==\"Timestamp\") {\n chart[0].series.push(series);\n chart[0].data.push([]);\n columns++;\n }\n}\n\n\nfor (var j=0; j<msg.payload.length; j++) {\n for(var i=0;i<columns;i++) {\n chart[0].data[i].push({\"x\":msg.payload[j].Timestamp, \"y\":msg.payload[j][chart[0].series[i]]});\n } \n}\n\nfor (var k = 0; k < chart[0].series.length; k++) {\n apex_chart.push({\n name: chart[0].series[k],\n data: chart[0].data[k]\n })\n}\nmsg1 = { payload: chart }\nmsg2 = { payload: apex_chart }\n\n\n//msg.payload = chart ;\n\n\n\n\n\nreturn [msg1,msg2];\n\n\n\n\n\n\n\n\n\n\n\n\n\n",
        "outputs": 2,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 410,
        "y": 1040,
        "wires": [
            [
                "fc4bf11b088a905d"
            ],
            [
                "207d795590aa3f4c",
                "ba30230bdd7b910f"
            ]
        ]
    },
    {
        "id": "fc4bf11b088a905d",
        "type": "debug",
        "z": "c0c06963c97bbd82",
        "name": "debug 343",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 605,
        "y": 1000,
        "wires": [],
        "l": false
    },
    {
        "id": "207d795590aa3f4c",
        "type": "debug",
        "z": "c0c06963c97bbd82",
        "name": "debug 346",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 605,
        "y": 1040,
        "wires": [],
        "l": false
    },
    {
        "id": "29ca60946c853c61",
        "type": "inject",
        "z": "c0c06963c97bbd82",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"Timestamp\":\"11/15/2023 9:18:06 AM\",\"Tensione fase R\":68,\"Tensione fase S\":229,\"Energia rigenerata totale\":304},{\"Timestamp\":\"11/15/2023 9:18:16 AM\",\"Tensione fase R\":252,\"Tensione fase S\":84,\"Energia rigenerata totale\":198},{\"Timestamp\":\"11/15/2023 9:18:26 AM\",\"Tensione fase R\":324,\"Tensione fase S\":154,\"Energia rigenerata totale\":190},{\"Timestamp\":\"11/15/2023 9:18:36 AM\",\"Tensione fase R\":47,\"Tensione fase S\":48,\"Energia rigenerata totale\":307},{\"Timestamp\":\"11/15/2023 9:18:46 AM\",\"Tensione fase R\":16,\"Tensione fase S\":37,\"Energia rigenerata totale\":-25},{\"Timestamp\":\"11/15/2023 9:18:56 AM\",\"Tensione fase R\":310,\"Tensione fase S\":-34,\"Energia rigenerata totale\":-31},{\"Timestamp\":\"11/15/2023 9:19:06 AM\",\"Tensione fase R\":166,\"Tensione fase S\":279,\"Energia rigenerata totale\":-35},{\"Timestamp\":\"11/15/2023 9:19:16 AM\",\"Tensione fase R\":196,\"Tensione fase S\":-19,\"Energia rigenerata totale\":63},{\"Timestamp\":\"11/15/2023 9:19:26 AM\",\"Tensione fase R\":-47,\"Tensione fase S\":7,\"Energia rigenerata totale\":197},{\"Timestamp\":\"11/15/2023 9:19:36 AM\",\"Tensione fase R\":326,\"Tensione fase S\":98,\"Energia rigenerata totale\":10},{\"Timestamp\":\"11/15/2023 9:19:46 AM\",\"Tensione fase R\":306,\"Tensione fase S\":308,\"Energia rigenerata totale\":-6},{\"Timestamp\":\"11/15/2023 9:19:56 AM\",\"Tensione fase R\":269,\"Tensione fase S\":36,\"Energia rigenerata totale\":-1},{\"Timestamp\":\"11/15/2023 9:20:06 AM\",\"Tensione fase R\":93,\"Tensione fase S\":255,\"Energia rigenerata totale\":206}]",
        "payloadType": "json",
        "x": 170,
        "y": 1060,
        "wires": [
            [
                "331c581fae67856e"
            ]
        ]
    },
    {
        "id": "7b79c772fbaab385",
        "type": "ui_group",
        "name": "Zoomable time series",
        "tab": "968b45b75eb8747a",
        "order": 5,
        "disp": true,
        "width": "20",
        "collapse": true,
        "className": ""
    },
    {
        "id": "968b45b75eb8747a",
        "type": "ui_tab",
        "name": "Training",
        "icon": "dashboard",
        "order": 19,
        "disabled": false,
        "hidden": false
    }
]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4fce3cb1b11e1d8afb9b52bd05e6a27a118fea56.png)

Thanks in advance for your helps!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 November 2023 10:51 UTC](https://discourse.nodered.org/t/apexchart-how-to-delete-shades/82871/2 "2023-11-15T10:51:48Z")

</div>

Did you try searching with google?

---

<div class="post-metadata">

**Author:** ![ALIEN](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alien/32/62198_2.png) [@ALIEN](https://discourse.nodered.org/u/ALIEN)\
**Post date:** [15 November 2023 11:07 UTC](https://discourse.nodered.org/t/apexchart-how-to-delete-shades/82871/3 "2023-11-15T11:07:46Z")

</div>

Yes indeed! I tried this

```auto
chart: {
    dropShadow: {
        enabled: false,
        enabledOnSeries: undefined,
        top: 0,
        left: 0,
        blur: 3,
        color: '#000',
        opacity: 0.35
    }
}

```

but doesn't work!

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 November 2023 11:35 UTC](https://discourse.nodered.org/t/apexchart-how-to-delete-shades/82871/4 "2023-11-15T11:35:49Z")

</div>

This has nothing related to the apex charts config but the dashboard CSS does have a bit nasty rule for ui\_templates and SVG path elements.  
But there is always a solution..

For `ui_template` node add a CSS class

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a7e1bdd39c402337fd8d864413e255ac7e698264.png)

And then write a bit of CSS using another `ui_template` node

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/bec0e18f66e94fb9c4ded9c261efe7aaecaaf0fb.png)

---

<div class="post-metadata">

**Author:** ![ALIEN](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alien/32/62198_2.png) [@ALIEN](https://discourse.nodered.org/u/ALIEN)\
**Post date:** [15 November 2023 12:18 UTC](https://discourse.nodered.org/t/apexchart-how-to-delete-shades/82871/5 "2023-11-15T12:18:24Z")

</div>

Dear @hotNipi I really appreciate it. now it looks good 🤩

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2cee6a9861969b90bc3a61d5437d48f0c58825ed.png)

---

<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:** [29 November 2023 12:18 UTC](https://discourse.nodered.org/t/apexchart-how-to-delete-shades/82871/6 "2023-11-29T12:18:49Z")

</div>

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