Accepted answer

Do you have a var ctx = document.getElementById("myChart"); defined in your code.


Add this code to your options object:

animation: {
  onComplete: function () {
    var chartInstance = this.chart;
    var ctx = chartInstance.ctx;
    var height = chartInstance.controller.boxes[0].bottom;
    ctx.textAlign = "center";
    Chart.helpers.each( (dataset, i) {
      var meta = chartInstance.controller.getDatasetMeta(i);
      Chart.helpers.each( (bar, index) {
        ctx.fillText([index], bar._model.x, height - ((height - bar._model.y) / 2));


Surround your canvas with a container with your desired width and height

<div style="width: 100%; height: 500px">
    <canvas id="myChart" width="400" height="400"></canvas>

and add the following into your options object

// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,


If you would like to render centered text for each element, there is an easier way:

Chart.helpers.each( (bar, index) {
    var centerPoint = bar.getCenterPoint();
    ctx.fillText([index], centerPoint.x, centerPoint.y));

It seems that 'getCenterPoint' isn't available in version 2.1.3 (that you use in your example). I tried it with 2.5.0 and it works

Related Query

More Query from same tag