Show values ​​at the top of columns in chart.js

Question

Please refer to this fiddle: https://jsfiddle.net/4mxhogmd/1/

I am working on chart.js. If you see in the script, you will notice that the value displayed on the top of the panel is not displayed properly in some cases (it goes beyond the canvas). During the study, I came across this link, how to display data values ​​on a chart ..js

But here they used a tooltip for the same cases when the text was configured inside the columns. I do not want it

var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"], datasets: [{ data: [6, 87, 56, 15, 88, 60, 12], backgroundColor: "#4082c4" }] }, options: { "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]; ctx.fillText(data, bar._model.x, bar._model.y - 5); }); }); } }, legend: { "display": false }, tooltips: { "enabled": false }, scales: { yAxes: [{ display: false, gridLines: { display : false }, ticks: { display: false, beginAtZero:true } }], xAxes: [{ gridLines: { display : false }, ticks: { beginAtZero:true } }] } } }); 

What I want is to show the value only from above, for all cases.

Answer 1

I pulled the data from the definition inside myChart so that I could pull the maximum value from the dataset. Then inside yAxes you can set max ticks as max value + 10 from your dataset. This ensures that the upper columns in the graph will not go off the edge of the canvas and do not display their value.

 var ctx = document.getElementById("myChart"); debugger; var data = { labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"], datasets: [{ data: [150, 87, 56, 50, 88, 60, 45], backgroundColor: "#4082c4" }] } var myChart = new Chart(ctx, { type: 'bar', data: data, options: { "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]; ctx.fillText(data, bar._model.x, bar._model.y - 5); }); }); } }, legend: { "display": false }, tooltips: { "enabled": false }, scales: { yAxes: [{ display: false, gridLines: { display: false }, ticks: { max: Math.max(...data.datasets[0].data) + 10, display: false, beginAtZero: true } }], xAxes: [{ gridLines: { display: false }, ticks: { beginAtZero: true } }] } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script> <canvas id="myChart" width="100" height="100"></canvas> 

Answer 2

The fastest way I found to do this is to use this plugin: https://github.com/chartjs/chartjs-plugin-datalabels

Labels can be added to your diagrams by simply importing the plugin into a js file, for example:

 import 'chartjs-plugin-datalabels' 

And if you want to apply its values ​​on top (globally), just set these parameters in your code:

 Chart.defaults.global.plugins.datalabels.anchor = 'end'; Chart.defaults.global.plugins.datalabels.align = 'end'; 

Additional options can be found here: https://chartjs-plugin-datalabels.netlify.com/options.html

Answer 3

Here is a more reliable solution that displays the datapoint value inside the panel for cases when the axis height is close to the height of the bar. In other words, this will display the value above the panel and / or below the panel if the text goes beyond the visible area of ​​the canvas.

 Chart.plugins.register({ afterDraw: function(chartInstance) { if (chartInstance.config.options.showDatapoints) { var helpers = Chart.helpers; var ctx = chartInstance.chart.ctx; var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor); // render the value of the chart above the bar ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily); ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; ctx.fillStyle = fontColor; chartInstance.data.datasets.forEach(function (dataset) { for (var i = 0; i < dataset.data.length; i++) { var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model; var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight; var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5; ctx.fillText(dataset.data[i], model.x, yPos); } }); } } }); 

You can enable the chart to use the plugin by adding the property below to your chart settings.

 showDatapoints: true, 

Answer 4

This worked in my case. (Plugins section below)

 options: { responsive: true, scales: { yAxes: [{ ticks: { beginAtZero: true, } }] }, plugins: { datalabels: { anchor: 'end', align: 'top', formatter: Math.round, font: { weight: 'bold' } } } } 

Good coding.

Answer 5

You can consider a plugin that shows the value of the data at the top of each bar. plugins: {

 afterDatasetsDraw: function (context, easing) { var ctx = context.chart.ctx; context.data.datasets.forEach(function (dataset) { for (var i = 0; i < dataset.data.length; i++) { if (dataset.data[i] != 0) { var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model; var textY = model.y + (dataset.type == "line" ? -3 : 15); ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily); ctx.textAlign = 'start'; ctx.textBaseline = 'middle'; ctx.fillStyle = dataset.type == "line" ? "black" : "black"; ctx.save(); ctx.translate(model.x, textY-15); ctx.rotate(4.7); ctx.fillText(dataset.data[i], 0, 0); ctx.restore(); } } }); } } 

live code: link

Answer 6

this works in my case, but its show values ​​are in the middle of the bar.

 chart.chart.config.options.animation["onComplete"] = function () { var ctx = chart.chart.ctx; ctx.font = '22px "Helvetica Neue", Helvetica, Arial, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function (dataset) { for (var i = 0; i < dataset.data.length; i++) { var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model, scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight; ctx.fillStyle = '#444'; var y_pos = model.y + 50; if ((scale_max - model.y) / scale_max >= 0.5) y_pos = model.y + 20; ctx.fillText(dataset.data[i], model.x, y_pos); } }); }