# Data displayed on chart

**URL:** <https://discourse.nodered.org/t/data-displayed-on-chart/89964>\
**Category:** Dashboard\
**Created:** [2 August 2024 20:08 UTC](https://discourse.nodered.org/t/data-displayed-on-chart/89964 "2024-08-02T20:08:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![xfear1](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xfear1](https://discourse.nodered.org/u/xfear1)\
**Post date:** [2 August 2024 20:08 UTC](https://discourse.nodered.org/t/data-displayed-on-chart/89964/1 "2024-08-02T20:08:07Z")

</div>

Hello!  
I need some help wiith some changes, is there a way to always display the values that were collected on my chart? So I would see every value without hovering over the point.

 ![Sem título](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8f927e20d4dbb2a12ebbaa0dc122a1539f9892a3.jpeg)

Another thing, can I change de name polling to something else?

![Captura de tela 2024-08-02 170700](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/c/cc934ffd7538fb80ac7418cdce651b48a066c028.jpeg)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [2 August 2024 21:00 UTC](https://discourse.nodered.org/t/data-displayed-on-chart/89964/2 "2024-08-02T21:00:20Z")

</div>

Are you using node-red-dashboard, AKA Dashboard 1 or @flowfuse/node-red-dashboard AKA Dashboard 2 (so called to avoid confusion 😀 )?

In node-red-dashboard, the "polling" which is shown when you mouse-over a data point comes from msg.topic. You can use a change node to make this more meaningful.

I don't think that you can make the "tooltip" display all the time for all points, usually that would result in a confusing mess. But maybe something could be done with CSS?

You could put a table below the chart and list the data points there.

---

<div class="post-metadata">

**Author:** ![xfear1](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xfear1](https://discourse.nodered.org/u/xfear1)\
**Post date:** [3 August 2024 00:05 UTC](https://discourse.nodered.org/t/data-displayed-on-chart/89964/3 "2024-08-03T00:05:10Z")

</div>

I'm using Dashboard 3.6.5, I don't really know if thats 1 or 2, but I suspect is this: node-red-dashboard.  
I kind of new with red node, how do I use the change node with the chart to change the msg.topic?  
I tried to inject a msg.topic with the name I want, but it did not work.

 ![testi](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d5398c67d0dcdb6d8ab55965f5ef7f380e7b5eda.jpeg)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [3 August 2024 00:48 UTC](https://discourse.nodered.org/t/data-displayed-on-chart/89964/4 "2024-08-03T00:48:18Z")

</div>

> [@xfear1](#):
>
> I kind of new with red node, how do I use the change node with the chart to change the msg.topic?  
> I tried to inject a msg.topic with the name I want, but it did not work.

I don't know anything about your Node-red flow except for the bit shown in your image above.  
You do seem to have a lot of different wires leading in to the chart node.

There are two different ways to use the chart node, either sending one data item at a time or else sending the data for an entire chart (eg historical data extracted from a database)

It is important to realise that data in Node-red is handled one message at a time, without reference to other messages.  
So when you inject msg.topic = 'FRANGOS' that does arrive at the chart node, but as soon as the node has done what it can with the message, it is discarded.  
`topic` _does not retain it's value like a variable in a traditional programming language._  
When the next message arrives, it either has it's own meg.topic or else a reference to msg.topic gets no value.  
Every message has to carry with it all of the data it needs.

Sorry, it's not easy to explain but it is vital to understand this. Every message is handled entirely by itself.

So your function node which is sending `{"topic": "polling", "payload": 890}` has to change the topic for every message it sends -` msg.topic = 'FRANGO'`  
Or you have to insert a change node into the wire from function to chart which changes msg.topic.

ps Frango is Brasilian Portuguese for chicken?

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [3 August 2024 01:29 UTC](https://discourse.nodered.org/t/data-displayed-on-chart/89964/5 "2024-08-03T01:29:42Z")

</div>

If you are interested in a little customization, go through this post.

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

```auto
[{"id":"a511ccb853b13640","type":"group","z":"f0ae706f0b39513f","name":"","style":{"label":true},"nodes":["8c9886312704c689","94892351e8e1ca4f","dae53b72edc705e4","7ec1374684484253","9747d50d74971dc9"],"x":184,"y":19,"w":732,"h":262},{"id":"8c9886312704c689","type":"inject","z":"f0ae706f0b39513f","g":"a511ccb853b13640","name":"","props":[{"p":"payload"},{"p":"charttitle","v":"Title Goes here","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"Yield\",\"type\":\"line\",\"data\":[{\"x\":\"2022-05\",\"y\":97.92},{\"x\":\"2022-06\",\"y\":98.52},{\"x\":\"2022-07\",\"y\":98.88},{\"x\":\"2022-08\",\"y\":98.66},{\"x\":\"2022-10\",\"y\":99.47},{\"x\":\"2022-11\",\"y\":98.32},{\"x\":\"2022-12\",\"y\":98.89},{\"x\":\"2023-01\",\"y\":98.7},{\"x\":\"2023-02\",\"y\":99.91},{\"x\":\"2023-03\",\"y\":98.72},{\"x\":\"2023-04\",\"y\":96.91},{\"x\":\"2023-05\",\"y\":96.2},{\"x\":\"2023-06\",\"y\":100.1},{\"x\":\"2023-07\",\"y\":98.83}]},{\"name\":\"Total Cases\",\"type\":\"column\",\"data\":[{\"x\":\"2022-05\",\"y\":6993},{\"x\":\"2022-06\",\"y\":8585},{\"x\":\"2022-07\",\"y\":9532},{\"x\":\"2022-08\",\"y\":8062},{\"x\":\"2022-10\",\"y\":7761},{\"x\":\"2022-11\",\"y\":7778},{\"x\":\"2022-12\",\"y\":4740},{\"x\":\"2023-01\",\"y\":6763},{\"x\":\"2023-02\",\"y\":5095},{\"x\":\"2023-03\",\"y\":8025},{\"x\":\"2023-04\",\"y\":6913},{\"x\":\"2023-05\",\"y\":5207},{\"x\":\"2023-06\",\"y\":6297},{\"x\":\"2023-07\",\"y\":8582}]},{\"name\":\"Loss Qty\",\"type\":\"area\",\"data\":[{\"x\":\"2022-05\",\"y\":-1602.6},{\"x\":\"2022-06\",\"y\":-1391},{\"x\":\"2022-07\",\"y\":-1162.4},{\"x\":\"2022-08\",\"y\":-1180.4},{\"x\":\"2022-10\",\"y\":-443.2},{\"x\":\"2022-11\",\"y\":-1435.6},{\"x\":\"2022-12\",\"y\":-572},{\"x\":\"2023-01\",\"y\":-959.6},{\"x\":\"2023-02\",\"y\":-49},{\"x\":\"2023-03\",\"y\":-1126},{\"x\":\"2023-04\",\"y\":-2381.83},{\"x\":\"2023-05\",\"y\":-2218.92},{\"x\":\"2023-06\",\"y\":65.26},{\"x\":\"2023-07\",\"y\":-1098.57}]}]","payloadType":"json","x":280,"y":240,"wires":[["94892351e8e1ca4f"]]},{"id":"94892351e8e1ca4f","type":"ui_template","z":"f0ae706f0b39513f","g":"a511ccb853b13640","group":"a2d9ac75438797b7","name":"Apex-Chart with Multiple Y Axis","order":1,"width":30,"height":8,"format":" <script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n\n<div id=\"chart\"></div>\n\n<script>\n\n(function(scope)\n {scope.$watch('msg', function(msg)\n {if (msg){var options =\n {series: msg.payload,\n chart:{type: 'area',stacked: true,height: 355,background:'#000',zoom:\n {type: 'x',enabled: true,autoScaleYaxis: true},\n toolbar:{autoSelected: 'zoom'}},\n dataLabels: {enabled: true,enabledOnSeries: [0,1],formatter: function (val, opts) {return val},},\n markers:{size: 2,},\n theme: {mode: 'dark'},\n colors: ['#FA2E2E', '#FF9800', '#546E7A', '#E91E63', '#FF9800'],\n \n title: {text: msg.charttitle,align: 'center',margin: 10,offsetX: 0,offsetY: -10,floating: false,style: {fontSize:30,fontWeight: 'bold',fontFamily: undefined,color: 'yellow'},},\n stroke:{width: [8,0,2],curve: ['smooth', 'smooth', 'smooth']},\n yaxis:[\n {labels:{formatter: function (val){return val.toFixed(1);},},title: { text: \"Title-1\", style: {color: \"#FA2E2E\"}},},\n {labels:{formatter: function (val){return val.toFixed(0);},},title: { text: \"Title-2\", style: {color: \"#FF9800\"}},},\n {labels:{formatter: function (val){return val.toFixed(1);},},title: { text: \"Title-3\", style: {color: \"#546E7A\"}},},],\n\n xaxis: {lines: {show: false,},type: 'gradient',datetimeUTC: false,labels: {format: 'dd/MMM HH:mm',},},\n tooltip: {enabled: true,style: {fontSize: '12px',fontFamily: undefined},x: {show: true,format: 'dd/MMM HH:mm',},\n row: {colors: undefined,opacity: 0.5},\n column: {colors: undefined,opacity: 0.5},\n padding: {top: 0,right: 0,bottom: 0,left: 0},},\n grid: {show: true,borderColor: '#ffffff',strokeDashArray: 0,position: 'back',\n xaxis: {lines: {show: false}}, \n yaxis: {lines: {show: false}},\n row: {colors: undefined,opacity: 0.5}, \n column: {colors: undefined,opacity: 0.5}, \n padding: {top: 0,right: 0,bottom: 0,left: 0},}};\n\n\nsetTimeout( ()=> {if(scope.chart){scope.chart.updateOptions(options)}else {scope.chart = new ApexCharts(document.querySelector(\"#chart\"), options);scope.chart.render();}}, 1000)}});})(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":760,"y":120,"wires":[[]]},{"id":"dae53b72edc705e4","type":"ui_button","z":"f0ae706f0b39513f","g":"a511ccb853b13640","name":"","group":"a2d9ac75438797b7","order":2,"width":"3","height":"1","passthru":false,"label":"Refresh","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":270,"y":120,"wires":[["9747d50d74971dc9"]]},{"id":"7ec1374684484253","type":"ui_button","z":"f0ae706f0b39513f","g":"a511ccb853b13640","name":"","group":"a2d9ac75438797b7","order":3,"width":"3","height":"1","passthru":false,"label":"Clear","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"[]","payloadType":"json","topic":"topic","topicType":"msg","x":260,"y":60,"wires":[["94892351e8e1ca4f"]]},{"id":"9747d50d74971dc9","type":"change","z":"f0ae706f0b39513f","g":"a511ccb853b13640","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\"name\":\"Series-1\",\"type\":\"line\",\"data\":[{\"x\":\"2022-05\",\"y\":97.92},{\"x\":\"2022-06\",\"y\":98.52},{\"x\":\"2022-07\",\"y\":98.88},{\"x\":\"2022-08\",\"y\":98.66},{\"x\":\"2022-10\",\"y\":99.47},{\"x\":\"2022-11\",\"y\":98.32},{\"x\":\"2022-12\",\"y\":98.89},{\"x\":\"2023-01\",\"y\":98.7},{\"x\":\"2023-02\",\"y\":99.91},{\"x\":\"2023-03\",\"y\":98.72},{\"x\":\"2023-04\",\"y\":96.91},{\"x\":\"2023-05\",\"y\":96.2},{\"x\":\"2023-06\",\"y\":100.1},{\"x\":\"2023-07\",\"y\":98.83}]},{\"name\":\"Series-2\",\"type\":\"column\",\"data\":[{\"x\":\"2022-05\",\"y\":6993},{\"x\":\"2022-06\",\"y\":8585},{\"x\":\"2022-07\",\"y\":9532},{\"x\":\"2022-08\",\"y\":8062},{\"x\":\"2022-10\",\"y\":7761},{\"x\":\"2022-11\",\"y\":7778},{\"x\":\"2022-12\",\"y\":4740},{\"x\":\"2023-01\",\"y\":6763},{\"x\":\"2023-02\",\"y\":5095},{\"x\":\"2023-03\",\"y\":8025},{\"x\":\"2023-04\",\"y\":6913},{\"x\":\"2023-05\",\"y\":5207},{\"x\":\"2023-06\",\"y\":6297},{\"x\":\"2023-07\",\"y\":8582}]},{\"name\":\"Series-3\",\"type\":\"area\",\"data\":[{\"x\":\"2022-05\",\"y\":-1602.6},{\"x\":\"2022-06\",\"y\":-1391},{\"x\":\"2022-07\",\"y\":-1162.4},{\"x\":\"2022-08\",\"y\":-1180.4},{\"x\":\"2022-10\",\"y\":-443.2},{\"x\":\"2022-11\",\"y\":-1435.6},{\"x\":\"2022-12\",\"y\":-572},{\"x\":\"2023-01\",\"y\":-959.6},{\"x\":\"2023-02\",\"y\":-49},{\"x\":\"2023-03\",\"y\":-1126},{\"x\":\"2023-04\",\"y\":-2381.83},{\"x\":\"2023-05\",\"y\":-2218.92},{\"x\":\"2023-06\",\"y\":65.26},{\"x\":\"2023-07\",\"y\":-1098.57}]}]","tot":"json"},{"t":"set","p":"charttitle","pt":"msg","to":"Place Chart Title Here","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":120,"wires":[["94892351e8e1ca4f"]]},{"id":"a2d9ac75438797b7","type":"ui_group","name":"CHART","tab":"0a734ef04f43c77a","order":2,"disp":false,"width":"30","collapse":false,"className":""},{"id":"0a734ef04f43c77a","type":"ui_tab","name":"APEX","icon":"dashboard","order":18,"disabled":false,"hidden":false}]

```

> [@Apex Chart with Customization](https://discourse.nodered.org/t/apex-chart-with-customization/77207):
>
> I spent most of my time last month in trying to find an alternative to ui\_chart in node-red-dashboard. the built in chart is good enough, the only drawback i faced was not having the zoom feature. so i was directed towards many alternatives but none of them had a simple and easy tutorial how to get the data from a mysql database and plot the same on dashboard. with the help of few experts, I could get the Apex chart start to look like what i wanted it to do. i am just putting a sample flow here…

---

<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:** [2 September 2024 01:29 UTC](https://discourse.nodered.org/t/data-displayed-on-chart/89964/6 "2024-09-02T01:29:49Z")

</div>

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