Example: how to show data values in charts.js
<body> <div class="chart-container" style="position: relative; width:80vw"> <canvas id="my_Chart"></canvas> </div> <script> // data define for bar chart var myData = { labels: ["Javascript", "Java", "Python", "PHP", "C++", "TypeScript", "Linux Shell","C","Ruby on Rails"], datasets: [{ label: "Hey, baby!", fill: false, backgroundColor: ['#ff0000', '#ff4000', '#ff8000', '#ffbf00', '#ffbf00', '#ffff00', '#bfff00', '#80ff00', '#40ff00', '#00ff00'], borderColor: 'black', data: [85, 60,70, 50, 18, 20, 45, 30, 20], }] }; // Options define for display value on top of bars var myoption = { tooltips: { enabled: true }, hover: { animationDuration: 1 }, animation: { duration: 1, onComplete: function () { var chartInstance = this.chart, ctx = chartInstance.ctx; ctx.textAlign = 'center'; ctx.fillStyle = "rgba(0, 0, 0, 1)"; ctx.textBaseline = 'bottom'; // Loop through each data in the datasets this.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); meta.data.forEach(function (bar, index) { var data = dataset.data[index]; ctx.fillText(data, bar._model.x, bar._model.y - 5); }); }); } } }; // Code to draw Chart var ctx = document.getElementById('my_Chart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', // Define chart type data: myData, // Chart data options: myoption // Chart Options [This is optional paramenter use to add some extra things in the chart]. }); </script></body>