chart js display data values code example

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>