# Show current value in the bar graph

**URL:** <https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654>\
**Category:** Dashboard\
**Created:** [6 January 2021 13:04 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654 "2021-01-06T13:04:55Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![marlon7br](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@marlon7br](https://discourse.nodered.org/u/marlon7br)\
**Post date:** [6 January 2021 13:04 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/1 "2021-01-06T13:04:55Z")

</div>

There is a way to show the current Value on the top of the Bar Graph without moving your curson on the top of it?

---

<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 January 2021 14:14 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/2 "2021-01-06T14:14:09Z")

</div>

HI, welcome to forum.  
It is not possible with ui\_chart node but you can do your charts using the ui\_template node and use chartjs library directly and that opens many of advanced possibilities.

As, it takes quite of coding, it is up to you to tell if you want to do it that way.

An example:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f40d868510023ffbc958e1ef005d12bc5549d8b1.png)

---

<div class="post-metadata">

**Author:** ![marlon7br](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@marlon7br](https://discourse.nodered.org/u/marlon7br)\
**Post date:** [6 January 2021 14:54 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/3 "2021-01-06T14:54:43Z")

</div>

It's a very simple Bar chart, with only a single variable, like your "Montag, 17 Uhr", feeded with a Modbus Read. Do you have any template code example?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/e/7eed39e0c1b2d3819b4ce063b36d15e694bed1f9.png)

---

<div class="post-metadata">

**Author:** ![marlon7br](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@marlon7br](https://discourse.nodered.org/u/marlon7br)\
**Post date:** [6 January 2021 14:56 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/4 "2021-01-06T14:56:21Z")

</div>

Forgot to say Hi, and thanks for the welcome!

---

<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 January 2021 14:57 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/5 "2021-01-06T14:57:00Z")

</div>

If one value only why not to use some gauge?

---

<div class="post-metadata">

**Author:** ![marlon7br](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@marlon7br](https://discourse.nodered.org/u/marlon7br)\
**Post date:** [6 January 2021 14:59 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/6 "2021-01-06T14:59:04Z")

</div>

I'm doing a project for the College and my professor dind't like any of the gauges and asked me to use a Graph Bar. I don't know why too haha.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [6 January 2021 15:15 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/7 "2021-01-06T15:15:20Z")

</div>

it's not the same visual result but the "Level" option of the gauge ui\_node does the job: display a level which varies with the value, and the value which is displayed inside  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/3/d31d4130ba72df51502308c4382910471e5f56d2.png)

---

<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 January 2021 15:24 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/8 "2021-01-06T15:24:44Z")

</div>

Most of the chartjs complexity can be avoided by using plotly charts... 🙂

```auto
[{"id":"c5db9e69.e34e5","type":"inject","z":"82bb9cb4.29b64","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"str","x":310,"y":640,"wires":[["a230896e.9204c8"]]},{"id":"a230896e.9204c8","type":"change","z":"82bb9cb4.29b64","name":"bar chart","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"x\":[\"Data label here\"],\"y\":[\"58.6\"]}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":640,"wires":[["75a92564.21e79c"]]},{"id":"75a92564.21e79c","type":"ui_template","z":"82bb9cb4.29b64","group":"6aa20356.9b59bc","name":"Example 2","order":2,"width":16,"height":8,"format":"<div id=\"plotly_chart\"></div>\n<script>\n\n// Initialize chart\nvar data = [{x:[0],y:[0]}];\nvar layout = {\n title:'No data',\n };\nPlotly.newPlot('plotly_chart', data, layout);\n\n// Update data & layout\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n \n var trace = {\n x:msg.payload.x,\n y:msg.payload.y,\n type: 'bar',\n connectgaps: true,\n text: msg.payload.y.map(String),\n textposition: 'auto',\n hoverinfo: 'none',\n marker: {\n color: 'rgb(158,202,225)',\n opacity: 0.6,\n line: {\n color: 'rgb(8,48,107)',\n width: 1.5\n }\n }\n \n } \n \n var data = [trace];\n \n var layout = {\n title: \"Chart title here\",\n titlefont: {\n size: 22,\n },\n autosize: true,\n plot_bgcolor: '#ffffff',\n paper_bgcolor: '#ffffff',\n 'xaxis': {\n title: 'X axsis title here',\n fixedrange: true\n },\n 'yaxis': {\n title: 'Y axix title here',\n fixedrange: true\n }\n };\n\n Plotly.newPlot('plotly_chart', data, layout, { displayModeBar: false }, { staticPlot: true }, { displaylogo: false })\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":780,"y":640,"wires":[[]]},{"id":"5e0d9a67.116c84","type":"ui_template","z":"82bb9cb4.29b64","group":"2e16cb22.999174","name":"Load Plotly","order":17,"width":0,"height":0,"format":"<script src=\"https://cdn.plot.ly/plotly-latest.min.js\"></script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":750,"y":560,"wires":[[]]},{"id":"6aa20356.9b59bc","type":"ui_group","name":"examples","tab":"d5ad8b85.f5ba18","order":1,"disp":true,"width":16,"collapse":false},{"id":"2e16cb22.999174","type":"ui_group","name":"Chart","tab":"567d8fae.98148","order":1,"disp":false,"width":"10","collapse":false},{"id":"d5ad8b85.f5ba18","type":"ui_tab","name":"Plotly","icon":"dashboard","disabled":false,"hidden":false},{"id":"567d8fae.98148","type":"ui_tab","name":"Realtime Power","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![marlon7br](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@marlon7br](https://discourse.nodered.org/u/marlon7br)\
**Post date:** [7 January 2021 13:55 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/9 "2021-01-07T13:55:11Z")

</div>

Hey hotNipi, sorry for the long time to reply. I`m really struggling to change the 58.6, that you use as an example. I'm trying to use the msg.payload I recieve from my modbus read block, but every sintax I try to use, doesn't work. Do you know how to add a variable, like the msg.payload, in that object's array?

---

<div class="post-metadata">

**Author:** ![marlon7br](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@marlon7br](https://discourse.nodered.org/u/marlon7br)\
**Post date:** [7 January 2021 13:57 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/10 "2021-01-07T13:57:20Z")

</div>

I was using that one, because I'm measuring the level of a tank in this project, but my professor didn't like this Gauge, Why? I don't know either hahaha.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [7 January 2021 13:59 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/11 "2021-01-07T13:59:32Z")

</div>

Why make it simple when you can make it complicated ? 😆

---

<div class="post-metadata">

**Author:** ![marlon7br](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@marlon7br](https://discourse.nodered.org/u/marlon7br)\
**Post date:** [7 January 2021 14:02 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/12 "2021-01-07T14:02:30Z")

</div>

exactly lol

---

<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:** [7 January 2021 16:52 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/13 "2021-01-07T16:52:43Z")

</div>

> [@marlon7br](#):
>
> Do you know how to add a variable, like the msg.payload, in that object's array?

I do.

```auto
[{"id":"c5db9e69.e34e5","type":"inject","z":"82bb9cb4.29b64","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":"1","topic":"","payload":"$round($random()*100, 2)\t\t","payloadType":"jsonata","x":510,"y":400,"wires":[["a230896e.9204c8"]]},{"id":"a230896e.9204c8","type":"change","z":"82bb9cb4.29b64","name":"bar chart","rules":[{"t":"set","p":"data","pt":"msg","to":"{\"x\":[\"Data label here\"],\"y\":[]}","tot":"json"},{"t":"set","p":"data.y[0]","pt":"msg","to":"payload","tot":"msg"},{"t":"move","p":"data","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":400,"wires":[["75a92564.21e79c"]]},{"id":"75a92564.21e79c","type":"ui_template","z":"82bb9cb4.29b64","group":"6aa20356.9b59bc","name":"Example 2","order":2,"width":"6","height":"9","format":"<div id=\"plotly_chart\"></div>\n<script>\n\n// Initialize chart\nvar data = [{x:[0],y:[0]}];\nvar layout = {\n title:'No data',\n };\nPlotly.newPlot('plotly_chart', data, layout);\n\n// Update data & layout\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n \n var trace = {\n x:msg.payload.x,\n y:msg.payload.y,\n type: 'bar',\n connectgaps: true,\n text: msg.payload.y.map(String),\n textposition: 'auto',\n hoverinfo: 'none',\n marker: {\n color: 'rgb(158,202,225)',\n opacity: 0.6,\n line: {\n color: 'rgb(8,48,107)',\n width: 1.5\n }\n }\n \n } \n \n var data = [trace];\n \n var layout = {\n title: \"Chart title here\",\n titlefont: {\n size: 22,\n },\n autosize: true,\n plot_bgcolor: '#ffffff',\n paper_bgcolor: '#ffffff',\n 'xaxis': {\n title: 'X axsis title here',\n fixedrange: true\n },\n 'yaxis': {\n title: 'Y axix title here',\n fixedrange: true\n }\n };\n\n Plotly.newPlot('plotly_chart', data, layout, { displayModeBar: false }, { staticPlot: true }, { displaylogo: false })\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":790,"y":400,"wires":[[]]},{"id":"5e0d9a67.116c84","type":"ui_template","z":"82bb9cb4.29b64","group":"2e16cb22.999174","name":"Load Plotly","order":17,"width":0,"height":0,"format":"<script src=\"https://cdn.plot.ly/plotly-latest.min.js\"></script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":790,"y":360,"wires":[[]]},{"id":"6aa20356.9b59bc","type":"ui_group","name":"examples","tab":"d5ad8b85.f5ba18","order":1,"disp":true,"width":"6","collapse":false},{"id":"2e16cb22.999174","type":"ui_group","name":"Chart","tab":"567d8fae.98148","order":1,"disp":false,"width":"10","collapse":false},{"id":"d5ad8b85.f5ba18","type":"ui_tab","name":"Plotly","icon":"dashboard","disabled":false,"hidden":false},{"id":"567d8fae.98148","type":"ui_tab","name":"Realtime Power","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![marlon7br](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@marlon7br](https://discourse.nodered.org/u/marlon7br)\
**Post date:** [8 January 2021 00:09 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/14 "2021-01-08T00:09:16Z")

</div>

It worked perfectly! Thank you so much hotNipi, helped me a lot 😄

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [8 January 2021 13:51 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/15 "2021-01-08T13:51:26Z")

</div>

i like it , but **how to make Y axes Fixed**. From 0 to 100 like this :  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a730c7742f1a7ee47a979ce45f5c364a5b918522.png)  
And see the chart Blue bar up and down (with the value inside) ?

---

<div class="post-metadata">

**Author:** ![marlon7br](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@marlon7br](https://discourse.nodered.org/u/marlon7br)\
**Post date:** [8 January 2021 14:14 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/16 "2021-01-08T14:14:26Z")

</div>

I added this line here in the "Example 2" template node.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1b6d0e1b589864c0295960b61339f0b9b3407c00.png)

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [8 January 2021 14:18 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/17 "2021-01-08T14:18:13Z")

</div>

👍 nice , it's great.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f678c07618d7b00d5387738158886f6d6845b834.png)

---

<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:** [22 January 2021 14:18 UTC](https://discourse.nodered.org/t/show-current-value-in-the-bar-graph/38654/18 "2021-01-22T14:18:20Z")

</div>

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