Chart.js Datalabel Plugin Implementation Problem in ui_template

Hello everyone,

What I am trying to achieve is to display the values of graph data on my bar chart. In order to do that I am using chart.js implemented on an ui_template node. There is a chartjs plugin for displaying datalabels on chartjs. But I am having trouble implementing chart.js plugin datatable to my own ui_template.

Below I shared my code in template and flow I designed for displaying the graph.

Thanks for help in advance.

What I have on dashboard:

What I want to do:

Code I Implemented in ui_template node:


<canvas id="barChartTmplt_1" width="400" height="400"></canvas>

    
<script>

theScope = scope;

$(document).ready(function() {


    create_chart();

    function create_chart() {


        try {


            var myChart = null;
            var DataLabel = {

                anchor: 'end',
                clamp: true,
                align: 'top',
                offset: -25,
                color: '#fffaaa',
                font: {
                    weight: 'normal',
                    size: 12,
                }
            };

            var ctx = document.getElementById("barChartTmplt_1");
            var config = {
                type: 'bar',
                data: {
                    labels: ["a", "b", "c", "d"],

                    datasets: [{
                            backgroundColor: "red",
                            borderColor: "blue",
                            borderWidth: 30,
                            label: '123',
                            data: [12, 99, 3, 5],
                            borderWidth: 0,
                            datalabels: DataLabel

                        },
                        {
                            backgroundColor: "blue",
                            borderColor: "red",
                            borderWidth: 30,
                            label: '456',
                            data: [9999, 19, 3, 5],
                            borderWidth: 0,
                            datalabels: DataLabel

                        },
                        {
                            backgroundColor: "green",
                            borderColor: "yellow",
                            borderWidth: 30,
                            label: '789',
                            data: [12, 19, 1, 5],
                            borderWidth: 0,
                            datalabels: DataLabel

                        }
                    ]

                },
                options: {
                    responsive: false,
                    plugins: {
                        // Change options for ALL labels of THIS CHART
                        datalabels: {
                            color: '#ffffff'
                        }
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        align: 'center',
                        labels: {
                            fontColor: "#000000",
                        }
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false
                            },
                            barPercentage: 0.9,
                            ticks: {
                                maxRotation: 0,
                                minRotation: 0
                            }
                        }],
                        yAxes: [{
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                beginAtZero: true
                                //min: 0,
                                //max: 50
                            }
                        }]
                    }
                }
            };
            myChart = new Chart(ctx, config);


            //console.dir(scope) // this also works
            //console.dir(scope.msg) // This doesn't because scope.msg doesn't yet exist

            // Lambda function to access the Angular Scope
            (function(theScope) {
                //console.log('--- SCOPE ---')
                //console.dir(scope) // this works but you only get it once (on startup)
                //console.dir(scope.msg) // Doesn't work for  because scope.msg doesn't yet exist

                //Have to use $watch so we pick up new, incoming msg's
                theScope.$watch('msg.payload', function(newVal, oldVal) {
                    //console.log('- Scope.msg -');
                    //console.dir(scope.msg);
                    //myChart.data.labels = ["x", "b", "c", "d"];
                    //updateChart(scope.msg);
                    updateChart(theScope.msg, myChart);
                })

            })(theScope);

        } catch (e) {
            console.log(e);
        }
    }


    function update(x) {

        //var config = dta;
        //myChart.options.title.text = 'new title';

        //myChart.update();
        theScope.send({
            payload: x
        });
        //theScope.send({payload:dta.lat});
        //theScope.send({payload:dta.lng});
        //theScope.send({payload:dta.position});
    }

    function updateChart(datain, myChart) {
        try {

            //myChart = localStorage.getItem("ChartObj");

            if (myChart == null || datain == undefined) return;

            var DataLabel = {
                anchor: 'end',
                clamp: true,
                align: 'top',
                offset: -25,
                color: '#fffaaa',
                font: {
                    weight: 'normal',
                    size: 12,
                }
            };
            // ctx.height = 400;
            //ctx.width = 400;
            myChart.data.datasets[0].data = datain.data.datasets[0].data;
            myChart.data.datasets[0].datalabels = DataLabel;
            myChart.data.datasets[1].data = datain.data.datasets[1].data;
            myChart.data.datasets[1].datalabels = DataLabel;
            myChart.data.datasets[2].data = datain.data.datasets[2].data;
            myChart.data.datasets[2].datalabels = DataLabel;
            myChart.options.plugins.datalabels.color = '#ffffff';
            //myChart.options.plugins.datalabels.display = true;
            myChart.update();

            //myChart = new Chart(ctx, config);
            //localStorage.setItem("ChartObj",myChart);
        } catch (e) {
            console.log(e);
        }

    }

});

</script>

My Flow:

[{"id":"1136a538.dc6d5b","type":"ui_template","z":"d93a508b.a5607","group":"caf9ba81.0fca58","name":"","order":1,"width":0,"height":0,"format":"\n<canvas id=\"barChartTmplt_1\" width=\"400\" height=\"400\"></canvas>\n\n    \n<script>\n\ntheScope = scope;\n\n$(document).ready(function() {\n\n\n    create_chart();\n\n    function create_chart() {\n\n\n        try {\n\n\n            var myChart = null;\n            var DataLabel = {\n\n                anchor: 'end',\n                clamp: true,\n                align: 'top',\n                offset: -25,\n                color: '#fffaaa',\n                font: {\n                    weight: 'normal',\n                    size: 12,\n                }\n            };\n\n            var ctx = document.getElementById(\"barChartTmplt_1\");\n            var config = {\n                type: 'bar',\n                data: {\n                    labels: [\"a\", \"b\", \"c\", \"d\"],\n\n                    datasets: [{\n                            backgroundColor: \"red\",\n                            borderColor: \"blue\",\n                            borderWidth: 30,\n                            label: '123',\n                            data: [12, 99, 3, 5],\n                            borderWidth: 0,\n                            datalabels: DataLabel\n\n                        },\n                        {\n                            backgroundColor: \"blue\",\n                            borderColor: \"red\",\n                            borderWidth: 30,\n                            label: '456',\n                            data: [9999, 19, 3, 5],\n                            borderWidth: 0,\n                            datalabels: DataLabel\n\n                        },\n                        {\n                            backgroundColor: \"green\",\n                            borderColor: \"yellow\",\n                            borderWidth: 30,\n                            label: '789',\n                            data: [12, 19, 1, 5],\n                            borderWidth: 0,\n                            datalabels: DataLabel\n\n                        }\n                    ]\n\n                },\n                options: {\n                    responsive: false,\n                    plugins: {\n                        // Change options for ALL labels of THIS CHART\n                        datalabels: {\n                            color: '#ffffff'\n                        }\n                    },\n                    legend: {\n                        display: true,\n                        position: 'top',\n                        align: 'center',\n                        labels: {\n                            fontColor: \"#000000\",\n                        }\n                    },\n                    scales: {\n                        xAxes: [{\n                            gridLines: {\n                                display: false\n                            },\n                            barPercentage: 0.9,\n                            ticks: {\n                                maxRotation: 0,\n                                minRotation: 0\n                            }\n                        }],\n                        yAxes: [{\n                            gridLines: {\n                                display: false\n                            },\n                            ticks: {\n                                beginAtZero: true\n                                //min: 0,\n                                //max: 50\n                            }\n                        }]\n                    }\n                }\n            };\n            myChart = new Chart(ctx, config);\n\n\n            //console.dir(scope) // this also works\n            //console.dir(scope.msg) // This doesn't because scope.msg doesn't yet exist\n\n            // Lambda function to access the Angular Scope\n            (function(theScope) {\n                //console.log('--- SCOPE ---')\n                //console.dir(scope) // this works but you only get it once (on startup)\n                //console.dir(scope.msg) // Doesn't work for  because scope.msg doesn't yet exist\n\n                //Have to use $watch so we pick up new, incoming msg's\n                theScope.$watch('msg.payload', function(newVal, oldVal) {\n                    //console.log('- Scope.msg -');\n                    //console.dir(scope.msg);\n                    //myChart.data.labels = [\"x\", \"b\", \"c\", \"d\"];\n                    //updateChart(scope.msg);\n                    updateChart(theScope.msg, myChart);\n                })\n\n            })(theScope);\n\n        } catch (e) {\n            console.log(e);\n        }\n    }\n\n\n    function update(x) {\n\n        //var config = dta;\n        //myChart.options.title.text = 'new title';\n\n        //myChart.update();\n        theScope.send({\n            payload: x\n        });\n        //theScope.send({payload:dta.lat});\n        //theScope.send({payload:dta.lng});\n        //theScope.send({payload:dta.position});\n    }\n\n    function updateChart(datain, myChart) {\n        try {\n\n            //myChart = localStorage.getItem(\"ChartObj\");\n\n            if (myChart == null || datain == undefined) return;\n\n            var DataLabel = {\n                anchor: 'end',\n                clamp: true,\n                align: 'top',\n                offset: -25,\n                color: '#fffaaa',\n                font: {\n                    weight: 'normal',\n                    size: 12,\n                }\n            };\n            // ctx.height = 400;\n            //ctx.width = 400;\n            myChart.data.datasets[0].data = datain.data.datasets[0].data;\n            myChart.data.datasets[0].datalabels = DataLabel;\n            myChart.data.datasets[1].data = datain.data.datasets[1].data;\n            myChart.data.datasets[1].datalabels = DataLabel;\n            myChart.data.datasets[2].data = datain.data.datasets[2].data;\n            myChart.data.datasets[2].datalabels = DataLabel;\n            myChart.options.plugins.datalabels.color = '#ffffff';\n            //myChart.options.plugins.datalabels.display = true;\n            myChart.update();\n\n            //myChart = new Chart(ctx, config);\n            //localStorage.setItem(\"ChartObj\",myChart);\n        } catch (e) {\n            console.log(e);\n        }\n\n    }\n\n});\n\n\n\n\n\n\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1080,"y":820,"wires":[[]]},{"id":"74c6fd1f.d11954","type":"function","z":"d93a508b.a5607","name":"GenerateRandomDataset","func":"function getRandomArbitrary(min, max) {\n  return (Math.random() * (max - min) + min).toFixed(0);\n}\n\nvar data = {};\nvar datasets = [];\nvar dataObj = {};\nvar dataArray = [];\n\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataObj.data = dataArray;\ndatasets.push(dataObj);\n\ndataObj = {};\ndataArray = [];\n\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataObj.data = dataArray;\ndatasets.push(dataObj);\n\ndataObj = {};\ndataArray = [];\n\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataObj.data = dataArray;\ndatasets.push(dataObj);\n\ndata.datasets = datasets; \n\nmsg.data = data;\nreturn msg;","outputs":1,"noerr":0,"x":850,"y":820,"wires":[["1136a538.dc6d5b"]]},{"id":"5f324239.99b4bc","type":"inject","z":"d93a508b.a5607","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":600,"y":820,"wires":[["74c6fd1f.d11954"]]},{"id":"caf9ba81.0fca58","type":"ui_group","name":"Group 1","tab":"8bc33234.133f3","order":1,"disp":true,"width":26},{"id":"8bc33234.133f3","type":"ui_tab","name":"Tab 13","icon":"dashboard","order":13}]