# Chart.js Datalabel Plugin Implementation Problem in ui\_template

**URL:** <https://discourse.nodered.org/t/chart-js-datalabel-plugin-implementation-problem-in-ui-template/19332>\
**Category:** Dashboard\
**Created:** [19 December 2019 08:57 UTC](https://discourse.nodered.org/t/chart-js-datalabel-plugin-implementation-problem-in-ui-template/19332 "2019-12-19T08:57:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![sesenlik](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@sesenlik](https://discourse.nodered.org/u/sesenlik)\
**Post date:** [19 December 2019 08:57 UTC](https://discourse.nodered.org/t/chart-js-datalabel-plugin-implementation-problem-in-ui-template/19332/1 "2019-12-19T08:57:32Z")

</div>

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:

 ![graph](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6d836b9c8ebeb50882755a7128f76fc5de885ff6.png)

What I want to do:

 ![graph2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9a26b5e91c909751e21b2a5a06b015b90fc90ec6.png)

Code I Implemented in ui\_template node:

```auto

<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:

```auto
[{"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}]

```