Add values to bars in bar chart?

[riprock67]

Description

Hi FF, thanks for the work on DB2. I really love what I see so far! I had a request. I was hoping to easily be able to add values to my bars, to make it easier to see the current exact value. I have an example image below. Would this be possible, after you swat all of the more important issues? My sincere thanks!

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

Just had a dig into the underlying ChartJS library that we are using and couldn't spot anything obvious. Everything is possible, but have sized this assuming we'll need to build something manually.

[riprock67]

Just had a dig into the underlying ChartJS library that we are using and couldn't spot anything obvious. Everything is possible, but have sized this assuming we'll need to build something manually.

FWIW, for DB 1, a contributor "HotNippy" made some suggestions, and I was able to modify a code he shared to do this. That is what produced the image above. Would it be of value for me to send this code? I want to make sure HN gets credit.

[joepavitt]

Quite possible, @hotNipi and I cross paths in the Node-RED forums regularly - including him here for his visibility :)

[hotNipi]

There is plugin to display data labels no mater the chart type. If that can be included, then if one can reach the chart object or can modify options of chart object, it is possible to add data labels pretty easily.

https://chartjs-plugin-datalabels.netlify.app/

[riprock67]

Hi Joe and hotNipi. I have been thinking on this request, and having worked on it over the last month, I think there are two ways this can be done better than what I requested: 1) you can use existing linear gauge code from HN, or wait for the upcoming built in linear gauge code, or 2) you can use the table example in the documentation. I have expanded the version in the documentation slightly (with lots of help on the discourse server) to the example I show below, if it helps anyone else figure out how to do this: [{"id":"9be7128e4de92a97","type":"ui-template","z":"d20a6f57ce52354d","group":"","page":"","ui":"f2eea23e252f30f6","name":"Dasboard 2.0 CSS","order":0,"width":0,"height":0,"head":"","format":".my-colored-text-widget.label-green label{\n color:greenyellow;\n}\n.my-colored-text-widget.text-red span{\n color:rgb(255, 0, 0);\n}\n.my-colored-text-widget.text-orange span{\n color:rgb(255, 145, 0);\n}\n.my-colored-text-widget.text-white span{\n color:rgb(255, 255, 255);\n}\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":790,"y":720,"wires":[[]]},{"id":"c60f99706e4b7811","type":"mqtt in","z":"d20a6f57ce52354d","name":"","topic":"Fridge","qos":"2","datatype":"json","broker":"c1170463.5c7f8","nl":false,"rap":true,"rh":0,"inputs":0,"x":90,"y":800,"wires":[["79cc6aa185f73436"]]},{"id":"79cc6aa185f73436","type":"change","z":"d20a6f57ce52354d","name":"C to F","rules":[{"t":"set","p":"payload","pt":"msg","to":"$number(payload[0])*9/5+32","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":210,"y":800,"wires":[["e7b105f8cf691729"]]},{"id":"e7b105f8cf691729","type":"change","z":"d20a6f57ce52354d","name":"Round to 0.X","rules":[{"t":"set","p":"payload","pt":"msg","to":"$round(payload, 1)","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":800,"wires":[["2c87162b636ed4f0"]]},{"id":"2c87162b636ed4f0","type":"switch","z":"d20a6f57ce52354d","name":"<32 or >38?","property":"payload","propertyType":"msg","rules":[{"t":"lt","v":"32","vt":"num"},{"t":"gt","v":"38","vt":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":3,"x":510,"y":800,"wires":[["ce0105e4af11a47b"],["ce0105e4af11a47b"],["994cbfcec93784aa"]]},{"id":"ce0105e4af11a47b","type":"change","z":"d20a6f57ce52354d","name":"Red Text","rules":[{"t":"set","p":"class","pt":"msg","to":"my-colored-text-widget text-red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":680,"y":780,"wires":[["9235ff4fd5bbac07"]]},{"id":"994cbfcec93784aa","type":"change","z":"d20a6f57ce52354d","name":"White Text","rules":[{"t":"set","p":"class","pt":"msg","to":"my-colored-text-widget text-white","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":690,"y":820,"wires":[["9235ff4fd5bbac07"]]},{"id":"9235ff4fd5bbac07","type":"ui-text","z":"d20a6f57ce52354d","group":"34aadd0ba3a79b51","order":5,"width":"3","height":"1","name":"Fridge Temperature","label":"Fridge","format":"{{msg.payload}}","layout":"col-center","style":true,"font":"Arial,Arial,Helvetica,sans-serif","fontSize":16,"color":"#ffffff","className":".my-colored-text-widget","x":890,"y":800,"wires":[]},{"id":"f2eea23e252f30f6","type":"ui-base","name":"Dolores DB2","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"c1170463.5c7f8","type":"mqtt-broker","name":"","broker":"192.168.202.3","port":"1883","clientid":"","autoConnect":true,"usetls":false,"verifyservercert":true,"protocolVersion":"4","keepalive":"15","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"true","birthPayload":"Temperature","birthMsg":{},"closeTopic":"","closeRetain":"false","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willRetain":"true","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"34aadd0ba3a79b51","type":"ui-group","name":"Indoor Temperatures (°F)","page":"b74745b3765efdef","width":"6","height":"1","order":3,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"b74745b3765efdef","type":"ui-page","name":"Status Page","ui":"f2eea23e252f30f6","path":"/page2","icon":"home","layout":"grid","theme":"a965ccfef139317a","order":1,"className":"","visible":"true","disabled":"false"},{"id":"a965ccfef139317a","type":"ui-theme","name":"HN Theme","colors":{"surface":"#606060","primary":"#caf0fe","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#ffffff"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]