Line chart modification

I am using a line chart to display temps... I'm wondering if its possible to make the font size larger that it uses when you mouse over the chart. If so where would that be done?

If you are talking about the tooltip then yes it is possible

[{"id":"d67dd0d2.817","type":"change","z":"34b4a5e.a6f4b5a","name":"Change chart tooltip options","rules":[{"t":"set","p":"ui_control.options.tooltips.bodyFontSize","pt":"msg","to":"16","tot":"num"},{"t":"set","p":"ui_control.options.tooltips.titleFontSize","pt":"msg","to":"18","tot":"num"},{"t":"set","p":"ui_control.options.tooltips.titleFontStyle","pt":"msg","to":"bold","tot":"str"},{"t":"delete","p":"payload","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":840,"y":800,"wires":[[]]}]
1 Like

I'm referring to the black box in the pic with the individual temps... I did try what you provided but probably not in the right place or something. Can it be used as is or does it need to be customized. Thanks for your help :slightly_smiling_face:

Here is example how to use it. And of course modify as you'll need as the values I put in, are just some random values.

[{"id":"299ec769.705768","type":"change","z":"5f1bed63.cb2a94","name":"Change chart tooltip options","rules":[{"t":"set","p":"ui_control.options.tooltips.bodyFontSize","pt":"msg","to":"16","tot":"num"},{"t":"set","p":"ui_control.options.tooltips.titleFontSize","pt":"msg","to":"18","tot":"num"},{"t":"set","p":"ui_control.options.tooltips.titleFontStyle","pt":"msg","to":"bold","tot":"str"},{"t":"delete","p":"payload","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":620,"wires":[["5195be71.c7eb9"]]},{"id":"72872604.4e3658","type":"ui_ui_control","z":"5f1bed63.cb2a94","name":"","events":"all","x":150,"y":620,"wires":[["299ec769.705768"]]},{"id":"5195be71.c7eb9","type":"ui_chart","z":"5f1bed63.cb2a94","name":"","group":"e6872d71.b8a78","order":6,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":590,"y":630,"wires":[[]]},{"id":"1fbfbd58.99a373","type":"function","z":"5f1bed63.cb2a94","name":"","func":"msg.payload = Math.random()*10\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":670,"wires":[["5195be71.c7eb9"]]},{"id":"cc6238a1.09e9f8","type":"inject","z":"5f1bed63.cb2a94","name":"","topic":"","payload":"","payloadType":"date","repeat":"2","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":670,"wires":[["1fbfbd58.99a373"]]},{"id":"6fd14442.f7eeec","type":"comment","z":"5f1bed63.cb2a94","name":"READ ME","info":"As the options you are changing in ui widgets are not permanent, they must be sent always after such events\n\nui_control node is forcing the options to be sent always when the dashboard connects with server side and after every deploy and after you change the tab in your dashboard (if you are using tabs)\n\nThis way your ui widget (chart) options are always up to date","x":180,"y":580,"wires":[]},{"id":"e6872d71.b8a78","type":"ui_group","z":"","name":"Default","tab":"8fcdaa26.bd37d8","disp":true,"width":20,"collapse":false},{"id":"8fcdaa26.bd37d8","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like

It is still not working... I'm running node red on a Raspberry pi and it looks like version 0.19.5... I'm thinking I'm due for an upgrade... I was just on github but not really seeing what the latest version is. I will be upgrading though and will report back. My project involves several ESP32 devices running upython and reporting temps back via MQTT. I'm heating with gas logs which tend to make the room warm near the ceiling and cool near the floor. Also controlling a fan based on the temp difference to help equalize the room temps. All that is working very well :slightly_smiling_face:

The upgrade was a little scary but got through it and the mods work as advertised... Thanks again.

1 Like

It appears that a side effect of using this mod is that where it used to show the time it now shows what appears to be timestamp. I'm also curious where you would find what tooltip options can be set.

There is document , describes how to do it, but I think it does not work for chart node. You will need to do it via callbacks and that requires reference to chart which you don't have.
To get it working you'll need to make chart by yourself, using ui_template node. Much more work to get it as you might like your chart but then you have full control over it.

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