[image] [{"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":" \n \n\n \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 ","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] 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.

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":" \n \n\n \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 ","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]

Very nice @smanjunath211. The icons top right ( :heavy_plus_sign:, :heavy_minus_sign:, :mag: :raised_hand:, :house:) 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.

I had trouble in the display too, @hotNipi solved with below input [image] Ui_chart alternate (Apex chart ?) Just want the zoom feature in the graph Dashboard For options add theme: { mode: 'dark' } here is my small project, developed by a lot of help from forum. [image] Apex Chart with Customization Share Your Projects 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…

[image] Paul-Reed: your template Not mine, credit should go to.... [image] Ui_chart alternate (Apex chart ?) Just want the zoom feature in the graph Dashboard 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…

Node-RED

Node-RED Forum

Tooltip question in Apex Chart

Dashboard

smanjunath211 10 August 2023 14:21 5

Not mine, credit should go to....

Topic		Replies	Views
Ui_chart alternate (Apex chart ?) Just want the zoom feature in the graph Dashboard	16	1219	28 March 2023
Data displayed on chart Dashboard	4	154	3 August 2024
eChart: how can I make the tooltip visible? General dashboard-2 , ui-template	56	1511	19 January 2026
Apexchart not working Dashboard	2	209	28 December 2023
Apex Chart with Customization Share Your Projects dashboard	10	844	26 August 2023

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Tooltip question in Apex Chart

Related topics