A little example about ui_chart advanced configuration.
Catch the Boson
[{"id":"1076704a.386908","type":"ui_button","z":"7ee51301.a9185c","name":"","group":"c7a27394.057878","order":1,"width":1,"height":1,"passthru":false,"label":"GO","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"reset","x":190,"y":360,"wires":[["1c612e7d.432ac2"]]},{"id":"f84ec1a3.50318","type":"ui_chart","z":"7ee51301.a9185c","name":"","group":"c7a27394.057878","order":5,"width":9,"height":9,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"-30","ymax":"30","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#00b3ff","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":750,"y":300,"wires":[[]]},{"id":"9251a607.5109c","type":"inject","z":"7ee51301.a9185c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":".1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":260,"wires":[["46dd99bd.680638","9ba0532e.7658a"]]},{"id":"d936016b.7da5f","type":"function","z":"7ee51301.a9185c","name":"prepare data for chart","func":"if(flow.get('run') == false){\n return\n}\n\nvar chartdata = context.get(\"chartdata\") || []\nvar pointcount = flow.get(\"chartpoints\") || 100\n// reset button has topic 'reset'. clear all data\nif(msg.topic === \"reset\"){\n context.set(\"chartdata\",[]);\n msg.payload = []\n return msg\n}\n\nmsg.payload.forEach(element => chartdata.push(element))\n\n// limit data collection length\nif(chartdata.length > pointcount){\n chartdata.splice(0, chartdata.length - pointcount)\n}\n//store data set\ncontext.set(\"chartdata\",chartdata);\n\nmsg.payload = [{\n\"series\": [\"A\"],\n\"xAxisID\": 'custom-x-axis',\n\"yAxisID\": 'custom-y-axis',\n\"data\": [chartdata],\n\"labels\": [\"\"]\n}]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":560,"y":280,"wires":[["f84ec1a3.50318"]]},{"id":"ec9e71e8.8842e","type":"function","z":"7ee51301.a9185c","name":"modify chart options","func":"let gridcolors = ['rgba(255, 0, 0, 0.5)','rgba(255, 160, 0, 0.5)','rgba(0, 217, 37, 0.5)','rgba(0, 217, 37, 0)','rgba(0, 217, 37, 0.5)','rgba(255, 160, 0, 0.5)','rgba(255, 0, 0, 0.5)']\nmsg.ui_control = {\n options: {\n legend: {\n display: false\n },\n tooltips: {\n enabled: false\n },\n scales: {\n xAxes: [{\n type: 'linear',\n id: 'custom-x-axis',\n position:'bottom',\n padding:100,\n gridLines:{\n color:gridcolors,\n zeroLineColor:'rgba(123, 113, 113, 0.75)',\n tickMarkLength:7,\n drawTicks:false\n },\n ticks: {\n fontColor:\"#ccc\",\n max: 30,\n min: -30,\n stepSize: 10\n \n }\n }],\n yAxes: [{\n id: 'custom-y-axis',\n \n gridLines:{\n color:gridcolors,\n zeroLineColor:'rgba(123, 113, 113, 0.75)',\n tickMarkLength:5,\n drawTicks:false\n },\n ticks: {\n fontColor:\"#ccc\",\n max: 30,\n min: -30,\n stepSize: 10\n }\n }]\n }\n }\n}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":560,"y":320,"wires":[["f84ec1a3.50318"]]},{"id":"d689bde.df3354","type":"inject","z":"7ee51301.a9185c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":320,"wires":[["bc6b8922.6e6cd8"]]},{"id":"46dd99bd.680638","type":"function","z":"7ee51301.a9185c","name":"random data","func":"var data = []\nvar xx,yy\nvar disturb = flow.get('disturb') || {x:0,y:0}\nfor(var i=0;i<50;++i){\n xx = disturb.x\n yy = disturb.y\n \n if(i %2 == 0){\n xx = Math.floor(Math.random()*i/8)-i/16\n yy = Math.floor(Math.random()*i)-i/2\n }\n \n data.push({x:xx,y:yy})\n}\nmsg.payload = data\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":370,"y":280,"wires":[["d936016b.7da5f"]]},{"id":"c4f537f2.375308","type":"ui_template","z":"7ee51301.a9185c","group":"c7a27394.057878","name":"CSS","order":6,"width":0,"height":0,"format":"<style>\n canvas.chart.chart-line {\n height:calc(100%) !important;\n width: calc(100%) !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":190,"y":520,"wires":[[]]},{"id":"1558c4ab.f5e53b","type":"ui_slider","z":"7ee51301.a9185c","name":"","label":"Count","tooltip":"","group":"c7a27394.057878","order":3,"width":6,"height":1,"passthru":true,"outs":"all","topic":"","min":"2","max":"300","step":1,"x":190,"y":460,"wires":[["dc417f97.e6555","56873ec5.06794"]]},{"id":"dc417f97.e6555","type":"change","z":"7ee51301.a9185c","name":"","rules":[{"t":"set","p":"chartpoints","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":440,"wires":[[]]},{"id":"56873ec5.06794","type":"ui_text","z":"7ee51301.a9185c","group":"c7a27394.057878","order":4,"width":1,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-center","x":350,"y":480,"wires":[]},{"id":"166fe50e.c7838b","type":"function","z":"7ee51301.a9185c","name":"disturb","func":"flow.set('disturb',{x:Math.floor(Math.random()*50)-25,y:Math.floor(Math.random()*50)-25})\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":510,"y":240,"wires":[[]]},{"id":"9ba0532e.7658a","type":"function","z":"7ee51301.a9185c","name":"focus to zero","func":"var disturb = flow.get('disturb')||{x:0,y:0}\nif(Math.abs(disturb.x) > 0.01){\n disturb.x *= 1 - Math.random()*0.5\n}else{\n disturb.x = 0\n}\nif(Math.abs(disturb.y) > 0.01){\n disturb.y *= 1 - Math.random() * 0.5\n}\nelse{\n disturb.y = 0\n}\nflow.set('disturb',disturb)\nif(disturb.y == 0){\n return msg;\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":370,"y":240,"wires":[["166fe50e.c7838b"]]},{"id":"bc6b8922.6e6cd8","type":"change","z":"7ee51301.a9185c","name":"","rules":[{"t":"set","p":"run","pt":"flow","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":320,"wires":[["ec9e71e8.8842e"]]},{"id":"1c612e7d.432ac2","type":"change","z":"7ee51301.a9185c","name":"","rules":[{"t":"set","p":"run","pt":"flow","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":360,"wires":[[]]},{"id":"458505c0.4e69dc","type":"ui_button","z":"7ee51301.a9185c","name":"","group":"c7a27394.057878","order":2,"width":1,"height":1,"passthru":false,"label":"STOP","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"reset","x":190,"y":400,"wires":[["53696830.dabf38"]]},{"id":"53696830.dabf38","type":"change","z":"7ee51301.a9185c","name":"","rules":[{"t":"set","p":"run","pt":"flow","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":400,"wires":[[]]},{"id":"c7a27394.057878","type":"ui_group","name":"CHART","tab":"54e197d8.7f7fe8","order":2,"disp":false,"width":"9","collapse":false},{"id":"54e197d8.7f7fe8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Alert - can be CPU intensive !!