# Probelm in executing script ( chart js ) in template node

**URL:** https://discourse.nodered.org/t/probelm-in-executing-script-chart-js-in-template-node/71248
**Category:** General
**Created:** [25 November 2022 15:17 UTC](https://discourse.nodered.org/t/probelm-in-executing-script-chart-js-in-template-node/71248 "2022-11-25T15:17:33Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Safouene28](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Safouene28](https://discourse.nodered.org/u/Safouene28)
#### Post date: [25 November 2022 15:17 UTC](https://discourse.nodered.org/t/probelm-in-executing-script-chart-js-in-template-node/71248/1 "2022-11-25T15:17:33Z")

</div>

Hello everyone ,

Like is mentionned in the title I have a problem when I want to add some effects on the graph , I want to add a shadow with the line , the first time when I deployed the code I had the perfect result ,But here is the probelm, I have an inect node wich is running every 1 min to update data on the graph , in the the first inject or after redploying or refreshing the dashboard I can see what I want ( new graph with the effects added ) but in the second inject nothing is showing anymore.

It seems the script is running only one time ? , Please I need some help

this is the code used :

```auto
[{"id":"c2e84092.0b024","type":"template","z":"369d4c45.8398a4","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=300 height =530></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\nvar linecolors = ['#FFAB99','#FFEE21','#218DFF']\n\n\nvar ctx = document.getElementById('myChart').getContext('2d');\n\n\nlet draw = Chart.controllers.line.prototype.draw;\nChart.controllers.line.prototype.draw = function() {\n draw.apply(this, arguments);\n let ctx = this.chart.chart.ctx;\n let _stroke = ctx.stroke;\n ctx.stroke = function() {\n ctx.save();\n ctx.shadowColor = '#07C';\n ctx.shadowBlur = 10;\n ctx.shadowOffsetX = 0;\n ctx.shadowOffsetY = 4;\n _stroke.apply(this, arguments);\n ctx.restore();\n }\n};\n\nvar chart = new Chart (ctx, {\n // The type of chart we want to create\n type: 'bar',\n \n // The data for our dataset\n data: {\n labels: {{{payload.labels}}},\n datasets: [\n {\n type:'line',\n label: 'First',\n backgroundColor: linecolors[2],\n borderColor: \"#FFF\",\n data: {{{payload.targets}}},\n yAxisID: 'left-y-axis',\n pointBorderColor: \"#FFF\",\n pointHoverBorderColor: linecolors[2],\n pointRadius: 3,\n pointHoverRadius: 3,\n fill: false,\n tension: 0.1,\n borderWidth: 3,\n steppedLine: true ,\n\n },\n {\n type:'bar',\n label: 'Second',\n //backgroundColor:blue_green_gradient,\n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: {{{payload.value_1}}},\n yAxisID: 'right-y-axis',\n barPercentage: 0.8,\n barThickness: 6,\n maxBarThickness: 8,\n minBarLength: 2,\n\n },\n {\n type:'bar',\n label: 'third',\n //backgroundColor:orange_red_gradient,\n backgroundColor: linecolors[0],\n borderColor: linecolors[0],\n data: {{{payload.value_2}}},\n yAxisID: 'right-y-axis',\n barPercentage: 0.8,\n barThickness: 6,\n maxBarThickness: 8,\n minBarLength: 2,\n }\n \n ]\n },\n\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n //gridLines :{display:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n fontColor:textcolor,\n beginAtZero: true,\n min: {{{payload.min}}},\n \t max: {{{payload.max}}},\n \t stepSize:{{{payload.step}}} \n }\n },\n { \n gridLines :{display:false},\n //gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n id: 'right-y-axis',\n type: 'linear',\n position: 'right',\n ticks: {display:false,\n fontColor:textcolor,\n beginAtZero: true,\n min: {{{payload.min}}},\n \t max: {{{payload.max}}},\n \t stepSize:{{{payload.step}}} \n }\n }\n\n],\n xAxes: [\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.1},\n \n ticks: {\n fontColor:textcolor\n }\n }\n]\n }\n }\n});\n\n</script>\n","output":"str","x":2110,"y":2480,"wires":[["2119b47e.bf7b6c"]]}]

```

and this is what I get

 ![grph nodePNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/767eca770bfbbd4427c2abf1f101eb8b5635ed20.png)

I forget to mention when I added this function , the probelm appeared

```auto
let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function() {
    draw.apply(this, arguments);
    let ctx = this.chart.chart.ctx;
    let _stroke = ctx.stroke;
    ctx.stroke = function() {
        ctx.save();
        ctx.shadowColor = '#07C';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 4;
        _stroke.apply(this, arguments);
        ctx.restore();
    }
};

```

Thanks.

---

<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: [24 January 2023 15:17 UTC](https://discourse.nodered.org/t/probelm-in-executing-script-chart-js-in-template-node/71248/2 "2023-01-24T15:17:56Z")

</div>

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