# How to edit ui\_chart to be without labels and have last value displayed

**URL:** <https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335>\
**Category:** Dashboard\
**Created:** [26 May 2020 22:29 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335 "2020-05-26T22:29:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [26 May 2020 22:29 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/1 "2020-05-26T22:29:13Z")

</div>

So i think this is the last challenge to my dashboard. I wnat a mini chart, like you can do in excel, without any labels (the display of x and y values) and have a big number in the center with the latest value of that chart something like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f8b6c4c48394bc2e5deda8947c400fdc1c115fa9.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:** [26 May 2020 22:48 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/2 "2020-05-26T22:48:25Z")

</div>

Pushing nr dashboard to the limits. And may be a little over. I'm not going to say it's impossible but can't see any easy way to achieve such thing also. I'm not smartest guy on topic anyway so just good luck. Going to follow up the solution if any.

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [26 May 2020 23:00 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/3 "2020-05-26T23:00:23Z")

</div>

Lmao, i know right. But that s the fun thing about NR Dash imo. It is quite simple to use, but at the same time, if you know how to, you can do amazing tricks.

BTW, I building a chart with ui\_template is also ok. I just dom't really know how to do that, so if someone can give me some light.

---

<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:** [27 May 2020 06:45 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/4 "2020-05-27T06:45:45Z")

</div>

If the line can be as value trail (no time component involved) then I can add option to [https://flows.nodered.org/node/node-red-contrib-ui-value-trail](https://flows.nodered.org/node/node-red-contrib-ui-value-trail)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/1297ae0dd8fd930af8a756ede5c61fa75fa7b146.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:** [27 May 2020 10:10 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/5 "2020-05-27T10:10:44Z")

</div>

As I found the idea reasonable enough, the option to show last value is added.  
v0.2.0 published

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 10:40 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/6 "2020-05-27T10:40:38Z")

</div>

If only i could use stored data with it, it would be perfect. I query the values and the time, and then i plot a chart. In a aesthetic sense thats exactly what i'm looking for, but I need to show the last 24 hours of data.

But maybe this is an option for now

---

<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:** [27 May 2020 10:51 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/7 "2020-05-27T10:51:15Z")

</div>

Yes, the value trail will never get the time scales.  
You can show historical data by just feeding all data points in order but that's all. And if there will be too many data points, the older points will be removed. And you have very little control over it.  
Tricky widget, more or less targeted for live data.

And many thanks, the idea was great.

I 'll try to see if there is any way to achieve something with the chartjs and ui\_temple somehow

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 11:15 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/8 "2020-05-27T11:15:02Z")

</div>

Well, i guess this will suffice. For now i'm reseting it all the time cause i'm still developing the dashboard, but at some point it will run without inturruptions for months. So i guess this will do the trick even tho it is not EXACTLY what I wanted. THANKS!!!

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 11:29 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/9 "2020-05-27T11:29:38Z")

</div>

Ok, I just realized i can't have a label name or unit. Is there any way to edit 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:** [27 May 2020 11:30 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/10 "2020-05-27T11:30:36Z")

</div>

Not currently. May be added.

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 11:31 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/11 "2020-05-27T11:31:33Z")

</div>

Ok! i will keep looking, then. For now I will just display last value. Thanks!

---

<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:** [27 May 2020 11:33 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/12 "2020-05-27T11:33:03Z")

</div>

But I just did this 😃

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

```auto
[{"id":"821cef66.60aa8","type":"ui_template","z":"bf66f153.dd752","group":"195db59f.44875a","name":"Line Chart","order":4,"width":"8","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":590,"y":420,"wires":[[]]},{"id":"e57aac9d.c6f3b","type":"inject","z":"bf66f153.dd752","name":"","topic":"","payload":"","payloadType":"date","repeat":"2","crontab":"","once":false,"onceDelay":"0.62","x":230,"y":370,"wires":[["96676de2.6bd3b"]]},{"id":"96676de2.6bd3b","type":"function","z":"bf66f153.dd752","name":"fake live data","func":"msg.payload = {}\nmsg.payload.first = Math.random() * 300\nmsg.payload.second = -2.5 + Math.random() * 5\nreturn msg;\n","outputs":1,"noerr":0,"x":390,"y":370,"wires":[["821cef66.60aa8"]]},{"id":"db64afe.49ae05","type":"template","z":"bf66f153.dd752","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\"></canvas>\n<div id=\"myValue\"></div>\n<style>\n #myValue{\n position: absolute;\n left: 125px;\n top: 100px;\n text-align: center;\n font-size: 60px;\n font-weight: bold;\n }\n #myChart{\n position:absolute;\n top:20px;\n }\n \n</style>\n<script>\n\nvar maxDataPoints = 20\n\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar chart = new Chart(ctx, {\n // The type of chart we want to create\n type: 'line',\n\n // The data for our dataset\n data: {\n labels: [],\n datasets: [\n {\n label: 'first',\n backgroundColor: '#00ff00',\n borderColor: '#00ff00',\n data: [],\n yAxisID: 'left-y-axis',\n steppedLine: false,\n fill: false,\n borderWidth: 1\n }\n ]\n },\n\n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{display:false,drawBorder:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n display:false\n }\n }\n],\n xAxes: [\n {\n gridLines :{display:false,drawBorder:false},\n type: 'time',\n distribution: 'series',\n ticks: {\n display:false\n }\n }\n]\n }\n }\n});\nfunction showValue(v){\n if(v){\n document.getElementById('myValue').innerHTML = v.toFixed(2)\n }\n \n}\nfunction addData(chart, data, label) {\n chart.data.datasets.forEach((dataset) => {\n if(dataset.label == label){\n dataset.data.push(data);\n }\n if(dataset.data.length > maxDataPoints){\n dataset.data.shift()\n }\n });\n chart.update(0);//0 means no animation\n}\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n addData(chart,{x:new Date(),y:msg.payload.first},\"first\")\n showValue(msg.payload.first)\n\n }\n });\n})(scope);\n</script>\n","output":"str","x":380,"y":430,"wires":[["821cef66.60aa8"]]},{"id":"32f7132.f9080ec","type":"inject","z":"bf66f153.dd752","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":230,"y":430,"wires":[["db64afe.49ae05"]]},{"id":"195db59f.44875a","type":"ui_group","z":"","name":"Chart","tab":"29b0213a.62176e","order":3,"disp":true,"width":"8","collapse":false},{"id":"29b0213a.62176e","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 11:46 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/13 "2020-05-27T11:46:40Z")

</div>

holy $h1t. you're an angel and i owe you my life! Thanks!!! with that exemple, i can also try and learn how to manipulate it myself in the future

---

<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:** [27 May 2020 11:48 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/14 "2020-05-27T11:48:04Z")

</div>

Well the chart does not play nice so the tweaking is may be quite of challenge but seems nearly possible.

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 12:37 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/15 "2020-05-27T12:37:51Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/4/24e8f5be6c30390359bd04f5433a3e8f8c33de68.png) This looks amazing. Thanks again!

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 13:58 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/16 "2020-05-27T13:58:58Z")

</div>

ok i'm a bit lost. Ifyou're so kind can you lend me a hand? If i want to add 2 of those charts in 1 tab, which variables should a change i tried changing a lot of em but it just pushes the data to the same chart or it just doesn't push the data at all

---

<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:** [27 May 2020 14:06 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/17 "2020-05-27T14:06:50Z")

</div>

If you look at `ui_template` node's info page, there is an example how to make template content unique.

```auto
<div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">Some text</div>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      $("#my_"+scope.$id).html(msg.payload);
    }
  });
})(scope);
</script>

```

Use this same strategy.

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 14:16 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/18 "2020-05-27T14:16:34Z")

</div>

It didn't work... what did i do wrong?

````auto
<div id="{{'myLabel'+$id}}">1º Terno</div>
<div id="{{'myValue'+$id}}"></div>
<div id="{{'myUnit'+$id}}">%</div>
<style>
md-card.nr-dashboard-template.ng-scope._md.visible{
    overflow: hidden
}
    #myValue{
       position: absolute;
        left: 30px;
        top: 50px;
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        color: #FFAB0B;
        overflow: hidden;
    }
    #myUnit{
       position: absolute;
        left: 140px;
        top: 90px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        overflow: hidden;
    }
    #myChart{
        position:absolute;
        top:20px;
        overflow: hidden;
    }
    #myLabel{
       position: absolute;
        left: 63px;
        top: 5px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        overflow: hidden;
    }
    div {
        overflow: hidden;    
    }
</style>
<script>

var maxDataPoints = 20

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: [],
        datasets: [
            {
                label: 'first',
                backgroundColor: '#00ff00',
                borderColor: '#00ff00',
                data: [],
                yAxisID: 'left-y-axis',
                steppedLine: false,
                fill: false,
                borderWidth: 2
            }
        ]
    },

    // Configuration options go here
    options: {
        elements: {
            point:{
                radius: 0
            }
        },
        scales: {
            yAxes: [
                {
                    gridLines :{display:false,drawBorder:false},
                    id: 'left-y-axis',
                    type: 'linear',
                    position: 'left',
                    ticks: {
                        display:false,
                        maxTicksLimit: 24,
                        suggestedMax: 100,
                        suggestedMin: 0
                    }
                }
            ],
            xAxes: [
                {
                    gridLines :{display:false,drawBorder:false},
                    type: 'time',
                    distribution: 'series',
                    ticks: {
                         display:false
                    }
                }
            ]
        }
    }
});
function showValue(v){
    if(v){
        document.getElementById('myValue').innerHTML = v.toFixed(1)
    }
    
}
function addData(chart, data, label) {
    chart.data.datasets.forEach((dataset) => {
        if(dataset.label == label){
            dataset.data.push(data);
        }
        if(dataset.data.length > maxDataPoints){
            dataset.data.shift()
        }
    });
    chart.update(1);//0 means no animation
}
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      addData(chart,{x:new Date(),y:msg.payload.first},"first")
      showValue(msg.payload.first)
      $("#myCanvas"+scope.$id).html(msg.payload);
      $("#myLabel"+scope.$id).html(msg.payload);
      $("#myValue"+scope.$id).html(msg.payload);
      $("#myUnit"+scope.$id).html(msg.payload);

    }
  });
})(scope);
</script>```
````

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [27 May 2020 14:17 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/19 "2020-05-27T14:17:35Z")

</div>

Sorry, first time messing with stuff like this...

---

<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:** [27 May 2020 15:27 UTC](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335/20 "2020-05-27T15:27:46Z")

</div>

Multiple charts example

Classes for elements should not be in those templates but somewhere in common place

```auto
[{"id":"821cef66.60aa8","type":"ui_template","z":"bf66f153.dd752","group":"195db59f.44875a","name":"Line Chart","order":4,"width":"8","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":590,"y":440,"wires":[[]]},{"id":"e57aac9d.c6f3b","type":"inject","z":"bf66f153.dd752","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":"0.62","x":210,"y":380,"wires":[["96676de2.6bd3b"]]},{"id":"96676de2.6bd3b","type":"function","z":"bf66f153.dd752","name":"fake live data","func":"msg.payload = {}\nmsg.payload.first = Math.random() * 300\nmsg.payload.second = Math.random() * 5\nreturn msg;\n","outputs":1,"noerr":0,"x":370,"y":380,"wires":[["821cef66.60aa8","41e61bf9.187f94"]]},{"id":"db64afe.49ae05","type":"template","z":"bf66f153.dd752","name":"","field":"template","fieldType":"msg","format":"html","syntax":"plain","template":"<canvas class=\"myChart\" id=\"{{'myChart'+$id}}\"></canvas>\n<div class=\"myValue\" id=\"{{'myValue'+$id}}\"></div>\n<style>\n .myValue{\n position: absolute;\n left: 125px;\n top: 100px;\n text-align: center;\n font-size: 60px;\n font-weight: bold;\n }\n .myChart{\n position:absolute;\n top:20px;\n }\n \n</style>\n\n<script>\n\n(function($scope) {\n setTimeout(function() {\n //debugger\n $scope.init();\n },100);\n \n $scope.init = function () {\n var maxDataPoints = 20\n var ctx = document.getElementById('myChart'+$scope.$id).getContext('2d');\n $scope.chart = new Chart(ctx, {\n // The type of chart we want to create\n type: 'line',\n \n // The data for our dataset\n data: {\n labels: [],\n datasets: [\n {\n label: 'first',\n backgroundColor: '#00ff0022',\n borderColor: '#00ff00',\n data: [],\n yAxisID: 'left-y-axis',\n steppedLine: false,\n fill: true,\n borderWidth: 1\n }\n ]\n },\n \n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{display:false,drawBorder:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n display:false\n }\n }\n],\n xAxes: [\n {\n gridLines :{display:false,drawBorder:false},\n type: 'time',\n distribution: 'series',\n ticks: {\n display:false\n }\n }\n]\n }\n }\n });\n function showValue(v){\n if(v){\n document.getElementById('myValue'+$scope.$id).innerHTML = v.toFixed(2)\n }\n }\n function addData(chart, data, label) {\n chart.data.datasets.forEach((dataset) => {\n if(dataset.label == label){\n dataset.data.push(data);\n }\n if(dataset.data.length > maxDataPoints){\n dataset.data.shift()\n }\n });\n chart.update(200);//0 means no animation\n }\n $scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n addData($scope.chart,{x:new Date(),y:msg.payload.first},\"first\")\n showValue(msg.payload.first)\n \n }\n });\n }\n})(scope);\n</script>\n\n\n","output":"str","x":380,"y":440,"wires":[["821cef66.60aa8"]]},{"id":"32f7132.f9080ec","type":"inject","z":"bf66f153.dd752","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":190,"y":440,"wires":[["db64afe.49ae05","e71370f9.bd593"]]},{"id":"e71370f9.bd593","type":"template","z":"bf66f153.dd752","name":"","field":"template","fieldType":"msg","format":"html","syntax":"plain","template":"<canvas class=\"myChart\" id=\"{{'myChart'+$id}}\"></canvas>\n<div class=\"myValue\" id=\"{{'myValue'+$id}}\"></div>\n<style>\n .myValue{\n position: absolute;\n left: 125px;\n top: 100px;\n text-align: center;\n font-size: 60px;\n font-weight: bold;\n }\n .myChart{\n position:absolute;\n top:20px;\n }\n \n</style>\n\n<script>\n\n(function($scope) {\n setTimeout(function() {\n //debugger\n $scope.init();\n },100);\n \n $scope.init = function () {\n var maxDataPoints = 20\n var ctx = document.getElementById('myChart'+$scope.$id).getContext('2d');\n $scope.chart = new Chart(ctx, {\n // The type of chart we want to create\n type: 'line',\n \n // The data for our dataset\n data: {\n labels: [],\n datasets: [\n {\n label: 'first',\n backgroundColor: '#00ff0022',\n borderColor: '#00ff00',\n data: [],\n yAxisID: 'left-y-axis',\n steppedLine: false,\n fill: true,\n borderWidth: 1\n }\n ]\n },\n \n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{display:false,drawBorder:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n display:false\n }\n }\n],\n xAxes: [\n {\n gridLines :{display:false,drawBorder:false},\n type: 'time',\n distribution: 'series',\n ticks: {\n display:false\n }\n }\n]\n }\n }\n });\n function showValue(v){\n if(v){\n document.getElementById('myValue'+$scope.$id).innerHTML = v.toFixed(2)\n }\n }\n function addData(chart, data, label) {\n chart.data.datasets.forEach((dataset) => {\n if(dataset.label == label){\n dataset.data.push(data);\n }\n if(dataset.data.length > maxDataPoints){\n dataset.data.shift()\n }\n });\n chart.update(200);//0 means no animation\n }\n $scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n addData($scope.chart,{x:new Date(),y:msg.payload.second},\"first\")\n showValue(msg.payload.second)\n \n }\n });\n }\n})(scope);\n</script>\n\n\n","output":"str","x":380,"y":480,"wires":[["41e61bf9.187f94"]]},{"id":"41e61bf9.187f94","type":"ui_template","z":"bf66f153.dd752","group":"195db59f.44875a","name":"Line Chart","order":4,"width":"8","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":590,"y":480,"wires":[[]]},{"id":"195db59f.44875a","type":"ui_group","z":"","name":"Chart","tab":"29b0213a.62176e","order":3,"disp":true,"width":"8","collapse":false},{"id":"29b0213a.62176e","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

[Next page](https://discourse.nodered.org/t/how-to-edit-ui-chart-to-be-without-labels-and-have-last-value-displayed/27335.md?page=2)