Show values on top of bars in chart.js

Question

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

I am working on chart.js If you see in fiddle, you will notice that value which is top on bar is not properly displayed in some cases(goes outside the canvas) While research I came across this link how to display data values on Chart.js

But here they used tooltip also for same cases to the text tweak inside of bars. I don't want this.

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 value on top only, for all cases.

Answer 1

I pulled out the data from being defined inside of myChart that way I could pull out the max value from the dataset. Then inside of the yAxes you can set the max ticks to be the max value + 10 from your data set. This ensures that the top bars in the graph will not go off the edge of the canvas and 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>