Tooltip question in Apex Chart

[smanjunath211]

[{"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

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.

[smanjunath211]

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.

[{"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}]

[Paul-Reed]

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.

[smanjunath211]

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

For options add theme: { mode: 'dark' }

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

Apex Chart with Customization

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…

[smanjunath211]

@Paul-Reed

your template

Not mine, credit should go to....

Ui_chart alternate (Apex chart ?) Just want the zoom feature in the graph

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…