# Line chart modification

**URL:** <https://discourse.nodered.org/t/line-chart-modification/22700>\
**Category:** General\
**Created:** [6 March 2020 11:29 UTC](https://discourse.nodered.org/t/line-chart-modification/22700 "2020-03-06T11:29:40Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![yawstick1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yawstick1/32/11419_2.png) [@yawstick1](https://discourse.nodered.org/u/yawstick1)\
**Post date:** [6 March 2020 11:29 UTC](https://discourse.nodered.org/t/line-chart-modification/22700/1 "2020-03-06T11:29:40Z")

</div>

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?

 ![chart](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a717b1ff942b8edab6f321627b72dedf1c7dc5d0.jpeg)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 March 2020 11:47 UTC](https://discourse.nodered.org/t/line-chart-modification/22700/2 "2020-03-06T11:47:06Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![yawstick1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yawstick1/32/11419_2.png) [@yawstick1](https://discourse.nodered.org/u/yawstick1)\
**Post date:** [6 March 2020 17:24 UTC](https://discourse.nodered.org/t/line-chart-modification/22700/3 "2020-03-06T17:24:55Z")

</div>

> [@hotNipi](#):
>
> ui\_control

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 🙂

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 March 2020 17:40 UTC](https://discourse.nodered.org/t/line-chart-modification/22700/4 "2020-03-06T17:40:13Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![yawstick1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yawstick1/32/11419_2.png) [@yawstick1](https://discourse.nodered.org/u/yawstick1)\
**Post date:** [7 March 2020 15:23 UTC](https://discourse.nodered.org/t/line-chart-modification/22700/5 "2020-03-07T15:23:28Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![yawstick1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yawstick1/32/11419_2.png) [@yawstick1](https://discourse.nodered.org/u/yawstick1)\
**Post date:** [8 March 2020 16:02 UTC](https://discourse.nodered.org/t/line-chart-modification/22700/6 "2020-03-08T16:02:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yawstick1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yawstick1/32/11419_2.png) [@yawstick1](https://discourse.nodered.org/u/yawstick1)\
**Post date:** [9 March 2020 11:12 UTC](https://discourse.nodered.org/t/line-chart-modification/22700/7 "2020-03-09T11:12:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 March 2020 12:45 UTC](https://discourse.nodered.org/t/line-chart-modification/22700/8 "2020-03-09T12:45:01Z")

</div>

There is [document](https://www.chartjs.org/docs/latest/configuration/tooltip.html) , 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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [23 March 2020 12:45 UTC](https://discourse.nodered.org/t/line-chart-modification/22700/9 "2020-03-23T12:45:04Z")

</div>

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