# Tooltip question in Apex Chart

**URL:** <https://discourse.nodered.org/t/tooltip-question-in-apex-chart/80405>\
**Category:** Dashboard\
**Tags:** apex-chart\
**Created:** [8 August 2023 09:08 UTC](https://discourse.nodered.org/t/tooltip-question-in-apex-chart/80405 "2023-08-08T09:08:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [8 August 2023 09:08 UTC](https://discourse.nodered.org/t/tooltip-question-in-apex-chart/80405/1 "2023-08-08T09:08:34Z")

</div>

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

```auto
[{"id":"b1625ed0f4d8a0e5","type":"inject","z":"05becf9181a0bb79","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"code\":5003099,\"period\":\"2023-07\",\"cases\":399,\"stdqty\":3128.16,\"actqty\":3159.07,\"lossqty\":-30.91,\"pc\":99.0215475},{\"code\":5003099,\"period\":\"2023-06\",\"cases\":956,\"stdqty\":7495.04,\"actqty\":7569.99,\"lossqty\":-74.95,\"pc\":99.0099062},{\"code\":5003099,\"period\":\"2023-05\",\"cases\":2201,\"stdqty\":17255.84,\"actqty\":17499.998,\"lossqty\":-244.158,\"pc\":98.6048113},{\"code\":5003099,\"period\":\"2023-03\",\"cases\":735,\"stdqty\":5762.4,\"actqty\":5924,\"lossqty\":-161.6,\"pc\":97.2721134},{\"code\":5003099,\"period\":\"2023-01\",\"cases\":2008,\"stdqty\":15742.72,\"actqty\":16153,\"lossqty\":-410.28,\"pc\":97.4600384},{\"code\":5003099,\"period\":\"2022-12\",\"cases\":1477,\"stdqty\":11579.68,\"actqty\":11696,\"lossqty\":-116.32,\"pc\":99.005472},{\"code\":5003099,\"period\":\"2022-11\",\"cases\":825,\"stdqty\":6468,\"actqty\":6733,\"lossqty\":-265,\"pc\":96.0641616},{\"code\":5003099,\"period\":\"2022-10\",\"cases\":2964,\"stdqty\":23237.76,\"actqty\":23480,\"lossqty\":-242.24,\"pc\":98.9683135},{\"code\":5003099,\"period\":\"2022-08\",\"cases\":1855,\"stdqty\":14543.2,\"actqty\":14689,\"lossqty\":-145.8,\"pc\":99.0074205},{\"code\":5003099,\"period\":\"2022-07\",\"cases\":556,\"stdqty\":4359.04,\"actqty\":4403,\"lossqty\":-43.96,\"pc\":99.0015898},{\"code\":5003099,\"period\":\"2022-06\",\"cases\":2787,\"stdqty\":21850.08,\"actqty\":22680,\"lossqty\":-829.92,\"pc\":96.3407407}]","payloadType":"json","x":380,"y":3120,"wires":[["bbb5db6cc70b5c24"]]},{"id":"bbb5db6cc70b5c24","type":"change","z":"05becf9181a0bb79","name":"Prepare Chart Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\t \"name\" : \"Total Cases\",\t \"type\" : 'column',\t \"data\" : payload.{\"x\": $.period, \"y\": $.cases}\t},\t{\t \"name\" : \"Yield\",\t \"type\" : 'line',\t \"data\" : payload.{\"x\": $.period, \"y\": ($.pc)}\t},\t{\t \"name\" : \"Std Qty\",\t \"type\" : 'line',\t \"data\" : payload.{\"x\": $.period, \"y\": $number($.stdqty)}\t},\t{\t \"name\" : \"Act Qty\",\t \"type\" : 'column',\t \"data\" : payload.{\"x\": $.period, \"y\": ($.actqty)}\t},\t{\t \"name\" : \"Loss Qty\",\t \"type\" : 'line',\t \"data\" : payload.{\"x\": $.period, \"y\": ($.lossqty)}\t}]","tot":"jsonata"},{"t":"set","p":"charttitle","pt":"msg","to":"'Chart Title Here'","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":3120,"wires":[["204ddade982a070f"]]},{"id":"204ddade982a070f","type":"ui_template","z":"05becf9181a0bb79","group":"155e4cbf89df99f9","name":"Apex-Chart","order":6,"width":"22","height":"8","format":"<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n<div id=\"chart\"></div>\n\n<script>\n\n(function(scope)\n {scope.$watch('msg', function(msg){\n if (msg){var options ={\n series: msg.payload,chart:{\n type: 'bar',stacked: false,height: 350,background:'#000',zoom:{type: 'x',enabled: true,autoScaleYaxis: true},\n toolbar:{autoSelected: 'zoom'}},dataLabels:{enabled: false},markers:{size: 0,},theme: {mode: 'dark'},\n title: {text: msg.charttitle,align: 'center',margin: 10,offsetX: 0,offsetY: 0,floating: false,style: {fontSize:\n 30,fontWeight: 'bold',fontFamily: undefined,color: 'yellow'},},\n stroke:{width: 5,curve: 'smooth'},\n yaxis:{labels:{formatter: function (val){return val.toFixed(0);},},},\n xaxis: {lines: {show: false,},type: 'gradient',datetimeUTC: false,labels: {format: 'YY/MMM',},},\n tooltip: {enabled: true,style: {fontSize: '12px',fontFamily: undefined},x: {show: true,format: 'YY/MMM',},\n row: {colors: undefined,opacity: 0.5},\n column: {colors: undefined,opacity: 0.5},\n padding: {top: 0,right: 0,bottom: 0,left: 0},},\n grid: {show: true,borderColor: '#ffffff',strokeDashArray: 0,position: 'back',\n xaxis: {lines: {show: false}}, \n yaxis: {lines: {show: false}}, \n row: {colors: undefined,opacity: 0.5}, \n column: {colors: undefined,opacity: 0.5}, \n padding: {top: 0,right: 0,bottom: 0,left: 0},}};\n\n\nsetTimeout( ()=> {if(scope.chart){scope.chart.updateOptions(options)}else {scope.chart = new ApexCharts(document.querySelector(\"#chart\"), options);scope.chart.render();}}, 1000)}});})(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":810,"y":3120,"wires":[[]]},{"id":"155e4cbf89df99f9","type":"ui_group","name":"Group 1","tab":"372a71f3a91ece00","order":2,"disp":false,"width":"30","collapse":false,"className":""},{"id":"372a71f3a91ece00","type":"ui_tab","name":"YIELD","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

I am having trouble in getting tooltip for all series in a multi-series graph. I am unable to find where the code has to go, the docs in apexcharts.js says to send an array  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1b83c50a0d537dfaba8b49bb3323d5dcdb0f6edf.png)

but unable to understand, what should i replace as array form in place of 'undefined'.

also not sure why a particular series is showing tooltip and not any other.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [9 August 2023 07:06 UTC](https://discourse.nodered.org/t/tooltip-question-in-apex-chart/80405/2 "2023-08-09T07:06:57Z")

</div>

Finally I was able to do it, but by trial and error, without knowing exact steps the achieved this result. but will do for now.

```auto
[{"id":"b1625ed0f4d8a0e5","type":"inject","z":"05becf9181a0bb79","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"code\":5003099,\"period\":\"2023-07\",\"cases\":399,\"stdqty\":3128.16,\"actqty\":3159.07,\"lossqty\":-30.91,\"pc\":99.0215475},{\"code\":5003099,\"period\":\"2023-06\",\"cases\":956,\"stdqty\":7495.04,\"actqty\":7569.99,\"lossqty\":-74.95,\"pc\":99.0099062},{\"code\":5003099,\"period\":\"2023-05\",\"cases\":2201,\"stdqty\":17255.84,\"actqty\":17499.998,\"lossqty\":-244.158,\"pc\":98.6048113},{\"code\":5003099,\"period\":\"2023-03\",\"cases\":735,\"stdqty\":5762.4,\"actqty\":5924,\"lossqty\":-161.6,\"pc\":97.2721134},{\"code\":5003099,\"period\":\"2023-01\",\"cases\":2008,\"stdqty\":15742.72,\"actqty\":16153,\"lossqty\":-410.28,\"pc\":97.4600384},{\"code\":5003099,\"period\":\"2022-12\",\"cases\":1477,\"stdqty\":11579.68,\"actqty\":11696,\"lossqty\":-116.32,\"pc\":99.005472},{\"code\":5003099,\"period\":\"2022-11\",\"cases\":825,\"stdqty\":6468,\"actqty\":6733,\"lossqty\":-265,\"pc\":96.0641616},{\"code\":5003099,\"period\":\"2022-10\",\"cases\":2964,\"stdqty\":23237.76,\"actqty\":23480,\"lossqty\":-242.24,\"pc\":98.9683135},{\"code\":5003099,\"period\":\"2022-08\",\"cases\":1855,\"stdqty\":14543.2,\"actqty\":14689,\"lossqty\":-145.8,\"pc\":99.0074205},{\"code\":5003099,\"period\":\"2022-07\",\"cases\":556,\"stdqty\":4359.04,\"actqty\":4403,\"lossqty\":-43.96,\"pc\":99.0015898},{\"code\":5003099,\"period\":\"2022-06\",\"cases\":2787,\"stdqty\":21850.08,\"actqty\":22680,\"lossqty\":-829.92,\"pc\":96.3407407}]","payloadType":"json","x":380,"y":3120,"wires":[["bbb5db6cc70b5c24"]]},{"id":"bbb5db6cc70b5c24","type":"change","z":"05becf9181a0bb79","name":"Prepare Chart Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\t \"name\" : \"Total Cases\",\t \"type\" : 'column',\t \"data\" : payload.{\"x\": $.period, \"y\": $.cases}\t},\t{\t \"name\" : \"Yield\",\t \"type\" : 'line',\t \"data\" : payload.{\"x\": $.period, \"y\": ($.pc)}\t},\t{\t \"name\" : \"Std Qty\",\t \"type\" : 'line',\t \"data\" : payload.{\"x\": $.period, \"y\": $number($.stdqty)}\t},\t{\t \"name\" : \"Act Qty\",\t \"type\" : 'column',\t \"data\" : payload.{\"x\": $.period, \"y\": ($.actqty)}\t},\t{\t \"name\" : \"Loss Qty\",\t \"type\" : 'line',\t \"data\" : payload.{\"x\": $.period, \"y\": ($.lossqty)}\t}]","tot":"jsonata"},{"t":"set","p":"charttitle","pt":"msg","to":"'Chart Title Here'","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":3120,"wires":[["4c0b8748bab365f1"]]},{"id":"4c0b8748bab365f1","type":"ui_template","z":"05becf9181a0bb79","group":"155e4cbf89df99f9","name":"Apex-Chart","order":13,"width":"22","height":"8","format":"<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n<div id=\"chart\"></div>\n\n<script>\n\n(function(scope)\n {scope.$watch('msg', function(msg){\n if (msg){var options ={\n series: msg.payload,chart:{\n type: 'area',stacked: false,height: 275,background:'#000',zoom:{type: 'x',enabled: true,autoScaleYaxis: true},\n toolbar:{autoSelected: 'zoom'}},dataLabels:{enabled: false},markers:{size: 0,},theme: {mode: 'dark'},\n title: {text: msg.charttitle,align: 'center',margin: 10,offsetX: 0,offsetY: 0,floating: false,style: {fontSize:\n 30,fontWeight: 'bold',fontFamily: undefined,color: 'yellow'},},\n stroke:{width: 2,curve: 'smooth'},\n yaxis:{labels:{formatter: function (val){return val.toFixed(0);},},},\n xaxis: {lines: {show: false,},type: 'gradient',datetimeUTC: false,labels: {format: 'dd/MMM HH:mm',},},\n tooltip: {enabled: true,style: {fontSize: '12px',fontFamily: undefined},x: {show: true,format: 'dd/MMM HH:mm',},\n row: {colors: undefined,opacity: 0.5},\n column: {colors: undefined,opacity: 0.5},\n padding: {top: 0,right: 0,bottom: 0,left: 0},},\n grid: {show: true,borderColor: '#ffffff',strokeDashArray: 0,position: 'back',\n xaxis: {lines: {show: true}}, \n yaxis: {lines: {show: false}}, \n row: {colors: undefined,opacity: 0.5}, \n column: {colors: undefined,opacity: 0.5}, \n padding: {top: 0,right: 0,bottom: 0,left: 0},}};\n\n\nsetTimeout( ()=> {if(scope.chart){scope.chart.updateOptions(options)}else {scope.chart = new ApexCharts(document.querySelector(\"#chart\"), options);scope.chart.render();}}, 1000)}});})(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":800,"y":3120,"wires":[[]]},{"id":"155e4cbf89df99f9","type":"ui_group","name":"Group 1","tab":"372a71f3a91ece00","order":2,"disp":false,"width":"30","collapse":false,"className":""},{"id":"372a71f3a91ece00","type":"ui_tab","name":"YIELD","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [10 August 2023 11:22 UTC](https://discourse.nodered.org/t/tooltip-question-in-apex-chart/80405/3 "2023-08-10T11:22:17Z")

</div>

Very nice @smanjunath211.  
The icons top right ( ➕, ➖, 🔍 ✋, 🏠) didn't display for me, they were just shaded rectangles.  
I guess your template could also be used for other Apex charts, with a few tweaks.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 August 2023 12:35 UTC](https://discourse.nodered.org/t/tooltip-question-in-apex-chart/80405/4 "2023-08-10T12:35:34Z")

</div>

I had trouble in the display too, @hotNipi solved with below input

> [@Ui\_chart alternate (Apex chart ?) Just want the zoom feature in the graph](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/13):
>
> For options add theme: { mode: 'dark' }

here is my small project, developed by a lot of help from forum.

> [@Apex Chart with Customization](https://discourse.nodered.org/t/apex-chart-with-customization/77207):
>
> I spent most of my time last month in trying to find an alternative to ui\_chart in node-red-dashboard. the built in chart is good enough, the only drawback i faced was not having the zoom feature. so i was directed towards many alternatives but none of them had a simple and easy tutorial how to get the data from a mysql database and plot the same on dashboard. with the help of few experts, I could get the Apex chart start to look like what i wanted it to do. i am just putting a sample flow here…

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 August 2023 14:21 UTC](https://discourse.nodered.org/t/tooltip-question-in-apex-chart/80405/5 "2023-08-10T14:21:20Z")

</div>

> [@Paul-Reed](#):
>
> your template

Not mine, credit should go to....

> [@Ui\_chart alternate (Apex chart ?) Just want the zoom feature in the graph](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/6):
>
> Apexchart example Flow based on your data (with some $random values added to simulated and test the chart update) [{"id":"c0c284e2d249d05c","type":"change","z":"54efb553244c241f","name":"sample data from mysql query","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t {\t \"d\":\"2023-03-21T00:29:00.000Z\",\t \"Temperature\":103 + $random()\*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:28:00…

---

<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:** [24 August 2023 14:21 UTC](https://discourse.nodered.org/t/tooltip-question-in-apex-chart/80405/6 "2023-08-24T14:21:56Z")

</div>

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