Probelm in executing script ( chart js ) in template node

[Safouene28]

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 :

[{"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

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

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.