How To Show Values On Top Of Line Chart in Chart Js

This afternoon, I just got a comment that made me write this post. By the way thanks to Basati Naveen for the inspiration today. As per the title of this post, I want to modify a little regarding the graphics that I made in the previous post.

In the line chart above, I don’t use the fill attribute. Below is the complete code snippet.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
</head>
<body>
    <div id="container" style="width: 75%;">
        <canvas id="UsersVsMyUsers"></canvas>
    </div>
    
    <script>
        $(function() {
            var color = Chart.helpers.color;
            var UserVsMyAppsData = {
                labels: ['29 Sep 2019','30 Sep 2019','01 Oct 2019','02 Oct 2019','03 Oct 2019','04 Oct 2019','05 Oct 2019'],
                datasets: [{
                    label: 'Users',
                    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.red,
                    borderWidth: 1,
                    data: [53,117,79,56,45,89,61],
                    fill: false,
                }, {
                    label: 'My Users',
                    backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.blue,
                    borderWidth: 1,
                    data: [43,105,76,50,33,97,52],
                    fill: false,
                }]
         
            };
         
            var UserVsMyAppsCtx = document.getElementById('UsersVsMyUsers').getContext('2d');
            var UserVsMyApps = new Chart(UserVsMyAppsCtx, {
                type: 'line',
                data: UserVsMyAppsData,
                options: {
                    responsive: true,
                    legend: {
                        position: 'bottom',
                        display: true,
         
                    },
                    "hover": {
                      "animationDuration": 0
                    },
                    "animation": {
                            "duration": 1,
                            "onComplete": function() {
                            var chartInstance = this.chart,
                              ctx = chartInstance.ctx;
             
                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';
             
                            this.data.datasets.forEach(function(dataset, i) {
                              var meta = chartInstance.controller.getDatasetMeta(i);
                              meta.data.forEach(function(bar, index) {
                                var data = dataset.data[index];
                                data = (!meta.hidden ? data : '');
                                ctx.fillText(data, bar._model.x, bar._model.y - 5);
                              });
                            });
                        }
                    },
                    title: {
                        display: false,
                        text: ''
                    },
                }
            });
        });
    </script>
</body>
</html>

If you want to use the fill attribute, you can change the fill to true.

Thank you for reading my post! Happy Coding!