# Template Chart is not working in Dashboard-Chartjs

**URL:** <https://discourse.nodered.org/t/template-chart-is-not-working-in-dashboard-chartjs/36368>\
**Category:** Dashboard\
**Created:** [23 November 2020 02:54 UTC](https://discourse.nodered.org/t/template-chart-is-not-working-in-dashboard-chartjs/36368 "2020-11-23T02:54:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![vishakraj](https://avatars.discourse-cdn.com/v4/letter/v/9dc877/32.png) [@vishakraj](https://discourse.nodered.org/u/vishakraj)\
**Post date:** [23 November 2020 02:54 UTC](https://discourse.nodered.org/t/template-chart-is-not-working-in-dashboard-chartjs/36368/1 "2020-11-23T02:54:43Z")

</div>

Hello,

I have been trying to display a chart in the dashboard, I used the template node in Function palette to create the chart, and points to template node in dashboard palette.  
I am following this link, [https://medium.com/javascript-in-plain-english/exploring-chart-js-e3ba70b07aa4](https://medium.com/javascript-in-plain-english/exploring-chart-js-e3ba70b07aa4)

Code, In Function Template node-

```auto
<canvas id="myChart222" width=600 height =300></canvas>
<script>
var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');
var linecolors = ['#009900','#889900']

var ctx = document.getElementById('myChart222').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels:["part1", "part2"],
        datasets: [{
                label: 'This week',
                data: [10, 20],
                }]
            };
});
</script>

```

But, it shows no graph in the dashboard, I do not know what is not correct,  
Is this the var ctx is not correct?  
Help me solve this issue, thanks

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [23 November 2020 04:11 UTC](https://discourse.nodered.org/t/template-chart-is-not-working-in-dashboard-chartjs/36368/2 "2020-11-23T04:11:29Z")

</div>

Hi Raj,

A couple of things

1. i believe you have to load the **chart.js** library in order for it to work
2. you had an extra **`;`** at the end of your **data** object property
3. added the extra piece of code that can hadle the injection of messages

Ui-Template

```auto
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

<canvas id="myChart222" width=600 height=300></canvas>
<script>
var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');
var linecolors = ['#009900','#889900']

var ctx = document.getElementById('myChart222').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels:["part1", "part2"],
        datasets: [{
                label: 'This week',
                data: [10, 20]
                }]
            }
});
</script>

<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      console.log(msg.payload);
    }
  });
})(scope);
</script>

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [23 November 2020 16:54 UTC](https://discourse.nodered.org/t/template-chart-is-not-working-in-dashboard-chartjs/36368/3 "2020-11-23T16:54:05Z")

</div>

> [@UnborN](#):
>
> i believe you have to load the **chart.js** library in order for it to work

No you don't, you don't need the

```auto
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

```

---

<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:** [23 December 2020 16:54 UTC](https://discourse.nodered.org/t/template-chart-is-not-working-in-dashboard-chartjs/36368/4 "2020-12-23T16:54:06Z")

</div>

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