I was misled by this comment: 2 Y-axis for a line chart - #2 by hotNipi
I didn't see anything like this in the node's help. There's a lot missing there. But your code example really helped me. I got two axes, each axis with its own dimension. But both graphs are tied to the same axis, the left one.
The temperature graph (blue) is linked to the humidity axis values, rather than to its own axis on the right.
Flow:
[{"id":"77ac0d428d4f7fc3","type":"inject","z":"chart_dual_axis_flow","name":"","props":[{"p":"payload"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":730,"y":520,"wires":[["158e13789d14967c"]]},{"id":"158e13789d14967c","type":"function","z":"chart_dual_axis_flow","name":"RND Humidity","func":"// Humidity\nfunction getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n msg.payload = Math.floor(Math.random() * (max - min)) + min;\n}\ngetRandomInt(15, 90);\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":900,"y":520,"wires":[["11076a4cf987c7cf"]]},{"id":"32a7ba35c0e492b6","type":"function","z":"chart_dual_axis_flow","name":"RND Temperature","func":"// Temperature\nfunction getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n msg.payload = Math.floor(Math.random() * (max - min)) + min;\n}\ngetRandomInt(-22, 0);\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":890,"y":480,"wires":[["b3b5272d8e5ef29e"]]},{"id":"647b3cae3cab0cd7","type":"inject","z":"chart_dual_axis_flow","name":"","props":[{"p":"payload"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":730,"y":480,"wires":[["32a7ba35c0e492b6"]]},{"id":"5b399b19bfae6249","type":"ui-chart","z":"chart_dual_axis_flow","group":"1a6de553fcc28deb","name":"Сlimate","label":"chart","order":9007199254740991,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":"5","removeOlderUnit":"60","removeOlderPoints":"","colors":["#00ff1e","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"8","height":"8","className":"","interpolation":"linear","x":1280,"y":500,"wires":[[]]},{"id":"b3b5272d8e5ef29e","type":"function","z":"chart_dual_axis_flow","name":"Temperature","func":" msg.payload;\n msg.topic = \"Temperature\";\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1090,"y":480,"wires":[["5b399b19bfae6249"]]},{"id":"11076a4cf987c7cf","type":"function","z":"chart_dual_axis_flow","name":"Humidity","func":"msg.payload;\nmsg.topic = \"Humidity\";\n\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1100,"y":520,"wires":[["5b399b19bfae6249"]]},{"id":"9697b39ea6d8c307","type":"function","z":"chart_dual_axis_flow","name":"series","func":"msg.payload = {\n\n \"series\": [\n {\n \"name\": \"Temperature\",\n \"itemStyle\": {\n \"color\": \"blue\"\n }\n },\n\n {\n \"name\": \"Humidity\",\n \"itemStyle\": {\n \"color\": \"red\"\n }\n }\n ],\n\n\n xAxis: {\n type: \"time\",\n name:'Time',\n nameGap: 30,\n nameLocation:'middle',\n nameTextStyle: {\n fontWeight: 'bold',\n fontSize: 16,\n color: 'red'\n },\n \n boundaryGap: false,\n //data: labels,\n axisTick: { show: true },\n //axisLabel: { formatter: \"{value}\", color: 'green' },\n axisLine: {\n lineStyle: {\n color: 'yellow',\n width: 2\n }\n }\n \n }, \n yAxis: [\n {\n type: \"value\",\n name: 'Humidity',\n nameLocation: 'middle',\n position: 'left',\n min: 10,\n max: 100,\n nameGap: 10,\n axisLine: { show: true, lineStyle: { color: 'red', width: 1 } },\n axisTick: { show: true },\n axisLabel: { formatter: \"{value} %\", color: 'red' },\n splitLine: { show: true, lineStyle: { color: '#333' } },\n nameTextStyle: { fontSize: 16, fontWeight: 'bold' },\n scale: true,\n axisPointer: { snap: true },\n yAxisIndex: 0\n },\n \n {\n type: \"value\",\n name: 'Temperature',\n nameLocation: 'middle',\n position: 'right',\n min: -25,\n max: 0,\n nameGap: 10,\n axisLine: { show: true, lineStyle: { color: 'blue', width: 2 } },\n axisTick: { show: true },\n axisLabel: { formatter: \"{value} °С\", color: 'aqua' },\n splitLine: { show: true }, \n nameTextStyle: { fontSize: 16, fontWeight: 'bold' },\n scale: true,\n axisPointer: { snap: true },\n yAxisIndex: 1\n }\n\n\n\n\n ]\n\n\n\n};\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":870,"y":600,"wires":[["5eef0cf35c6f04a5"]]},{"id":"80b74a6f2870417d","type":"inject","z":"chart_dual_axis_flow","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":750,"y":600,"wires":[["9697b39ea6d8c307"]]},{"id":"5eef0cf35c6f04a5","type":"change","z":"chart_dual_axis_flow","name":"msg.ui_update.chartOptions","rules":[{"t":"set","p":"ui_update.chartOptions","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1060,"y":600,"wires":[["5b399b19bfae6249"]]},{"id":"1a6de553fcc28deb","type":"ui-group","name":"climate test","page":"ddcd6724d9bcbf2e","width":"11","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"ddcd6724d9bcbf2e","type":"ui-page","name":"climate test","ui":"27d73580a0f044ca","path":"/climate","icon":"home","layout":"grid","theme":"a70602e73bbb2a95","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"27d73580a0f044ca","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":false},{"id":"a70602e73bbb2a95","type":"ui-theme","name":"Admin Theme","colors":{"surface":"#454545","primary":"#d47e1c","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"769462ef5dbbfbfb","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.2"}}]
How to attach a graph line to its axis?
