score:60

Accepted answer

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>

score:0

this works in my case but its show values in mid 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);    
            }
        });                
    }

score:1

you can consider plugin which show data value on 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

score:2

you can use add some padding-top inside your chart options

layout: {
    padding: {
        left: 0,
        right: 0,
        top: 30,
        bottom: 0
    }
 },

score:3

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'
        }
      }
    }
  }

happy coding.

score:19

here is a more robust solution that will display the datapoint value inside the bar for cases where the axis height is close to the bar height. in other words, this will display the value above the bar and/or below the bar if the text will extend beyond the canvas visible area.

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 your chart to use the plugin by adding the below property in your chart options.

showdatapoints: true,

score:33

the fastest way i found to do this was to use this plugin: https://github.com/chartjs/chartjs-plugin-datalabels

labels can be added to your charts simply by importing the plugin to the js file e.g.:

import 'chartjs-plugin-datalabels'

and if you want to apply it values on top (globally), simply set these options in your code:

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

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


Related Query

More Query from same tag