# Chart.js object in \<head\>

**URL:** <https://discourse.nodered.org/t/chart-js-object-in-head/73989>\
**Category:** Dashboard\
**Created:** [20 January 2023 22:06 UTC](https://discourse.nodered.org/t/chart-js-object-in-head/73989 "2023-01-20T22:06:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)\
**Post date:** [20 January 2023 22:06 UTC](https://discourse.nodered.org/t/chart-js-object-in-head/73989/1 "2023-01-20T22:06:21Z")

</div>

I can get a chart.js object to render in the dashboard...However I would like to put it in the section. Is this possible?  
Regards

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [20 January 2023 22:13 UTC](https://discourse.nodered.org/t/chart-js-object-in-head/73989/2 "2023-01-20T22:13:16Z")

</div>

Things in the head section don’t render as they are outside the body. You put things in there like functions and css etc

---

<div class="post-metadata">

**Author:** ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)\
**Post date:** [20 January 2023 22:17 UTC](https://discourse.nodered.org/t/chart-js-object-in-head/73989/3 "2023-01-20T22:17:20Z")

</div>

Thanks for the response. Maybe I mistakenly called the wrong name. I wanted to put it in the toolbar  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9f8ffdd8cb33ac5b95bad9db41ceadbe09d798a7.png)  
Since I can add images, text, I assumed I could get a chart on the toolbar

Regards

---

<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:** [21 January 2023 08:21 UTC](https://discourse.nodered.org/t/chart-js-object-in-head/73989/4 "2023-01-21T08:21:40Z")

</div>

The `<head>` is not related to the top-bar. The `<head>` element is a container for metadata (data about data) and is placed between the `<html>` tag and the `<body>` tag.

Even if you can place some stuff to the top bar using the `ui_template` targeted to the head element, those things will live on their own. Meaning that you can not send any `msg` to them. But what will the chart do if you can't send `msg's` to it?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 January 2023 08:43 UTC](https://discourse.nodered.org/t/chart-js-object-in-head/73989/5 "2023-01-21T08:43:49Z")

</div>

Alternatively you can build a page as you wish with u-builder or flex dash, both of which give you much more flexibility and control.

---

<div class="post-metadata">

**Author:** ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)\
**Post date:** [21 January 2023 12:57 UTC](https://discourse.nodered.org/t/chart-js-object-in-head/73989/6 "2023-01-21T12:57:49Z")

</div>

Currently in my toolbar I have the following objects where I do send msg's to update the data. For example the lightning alert indicator I change the icon to red if the strike is \<25Km and display the distance..

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/d/5d915e964bbb33c26adc7bf59541d7420f058a83.png)

I wanted to put a chart to the left of the lightning detector that would have a histogram count of strike hits for 1, 5, 10,15,30, and 60 minutes. Something very small like:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2b05b0f1a33b8c5e19d1857624e5611d0c2e06a2.png)

Here is my test flow where I put the data in a group on the body.

```auto
[{"id":"34cdee2792e95917","type":"ui_template","z":"207eeaf2c60df36a","group":"b37a52432d33b509","name":"test","order":4,"width":"6","height":"4","format":"","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":470,"y":300,"wires":[["29fe17e949535a59"]]},{"id":"631723fcdfa58ab9","type":"inject","z":"207eeaf2c60df36a","name":"","props":[{"p":"payload"},{"p":"legend1","v":" # of Votes","vt":"str"},{"p":"title","v":"Lightning Strikes","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[12,19,3,5,2,3]","payloadType":"json","x":130,"y":320,"wires":[["8da5f3d1ce371396","d43d20258e5fabc7","d0cd64cd17df8e4c"]]},{"id":"8da5f3d1ce371396","type":"template","z":"207eeaf2c60df36a","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div class=\"chart-container\" style=\"position: relative; height:10vh; width:10vw,maintainAspectRatio:true\">\n <canvas id=\"myChart1\"></canvas>\n</div>\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n<script>\nnew Chart(document.getElementById(\"myChart1\"), {\n type: 'bar',\n data: {\n labels: ['60', '30', '15', '10', '5', '1'],\n datasets: [\n {\n label: \"Strikes/min\",\n backgroundColor: \"rgba(38, 91, 95, .5000)\",\n borderColor: 'rgba(20, 20, 20, .5)', \n borderRadius: 7.5,\n borderWidth: 2,\n data: [\n {{payload}}\n\n]\n } ]\n },\n options: {\n scales: {\n x:{\n grid:{\n drawOnChartArea:false\n },\n ticks:{\n font:{\n size:8\n }\n }\n },\n y:{\n grid:{\n drawOnChartArea:false\n },\n ticks:{\n font:{\n size:8\n }\n }\n }\n },\n plugins: {\n legend: {\n display: false,\n labels: {\n fontColor: 'rgb(255, 99, 132)'\n }\n }, //end of legend\n title: {\n display: false,\n text: '{{{payload.title}}}'\n }, // end of title\n },\n }\n});\n\n</script>\n","output":"str","x":320,"y":300,"wires":[["34cdee2792e95917"]]},{"id":"6aa52a794a7301b9","type":"inject","z":"207eeaf2c60df36a","name":"","props":[{"p":"payload"},{"p":"legend1","v":" # of Votes","vt":"str"},{"p":"title","v":"Lightning Strikes","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[12,10,3,5,2,3]","payloadType":"json","x":130,"y":280,"wires":[["8da5f3d1ce371396","d43d20258e5fabc7","d0cd64cd17df8e4c"]]},{"id":"b37a52432d33b509","type":"ui_group","name":"Default","tab":"f2c07438be89993d","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"f2c07438be89993d","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<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:** [20 February 2023 12:58 UTC](https://discourse.nodered.org/t/chart-js-object-in-head/73989/7 "2023-02-20T12:58:41Z")

</div>

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