Chartjs-Chart.JS Error: this.scale is undefined

by

0👍

✅

There are several issues with your code.

You could rather use the following chart plugin to accomplish the same :

Chart.plugins.register({
   afterDatasetsDraw: function(chart) {
      var ctx = chart.ctx;
      chart.data.datasets.forEach(function(dataset, datasetIndex) {
         var datasetMeta = chart.getDatasetMeta(datasetIndex);
         datasetMeta.data.forEach(function(meta) {
            var posX = meta._model.x;
            var posY = meta._model.y;
            var value = chart.data.datasets[meta._datasetIndex].data[meta._index];
            // draw values
            ctx.save();
            ctx.textBaseline = 'bottom';
            ctx.textAlign = 'center';
            ctx.font = '16px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText(value, posX, posY);
            ctx.restore();
         });
      });
   }
});

add this plugin at the beginning of your script.

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

Chart.plugins.register({
   afterDatasetsDraw: function(chart) {
      var ctx = chart.ctx;
      chart.data.datasets.forEach(function(dataset, datasetIndex) {
         var datasetMeta = chart.getDatasetMeta(datasetIndex);
         datasetMeta.data.forEach(function(meta) {
            var posX = meta._model.x;
            var posY = meta._model.y;
            var value = chart.data.datasets[meta._datasetIndex].data[meta._index];
            // draw values
            ctx.save();
            ctx.textBaseline = 'bottom';
            ctx.textAlign = 'center';
            ctx.font = '16px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText(value, posX, posY);
            ctx.restore();
         });
      });
   }
});

var ctx = document.getElementById("chartA").getContext("2d");

Chart.defaults.global.animation.duration = 2400;
Chart.defaults.global.animation.easing = "easeInOutQuad";
Chart.defaults.global.elements.point.radius = 4;
Chart.defaults.global.elements.point.hoverRadius = 5;
Chart.defaults.global.elements.point.hitRadius = 1;

var chart = new Chart(ctx, {
   type: "bar",
   data: {
      labels: ["A", "B", "C"],
      datasets: [{
         label: "Test",
         backgroundColor: "rgba(255, 99, 132, 0.2)",
         borderColor: "#CF2748",
         borderWidth: 1,
         data: [10, 20, 30]
      }]
   },
   options: {
      tooltips: {
         mode: 'nearest',
         intersect: false
      },
      layout: {
         padding: {
            left: 20,
            right: 0,
            top: 0,
            bottom: 0
         }
      },
      legend: {
         display: true,
         position: 'top'
      },
      scales: {
         yAxes: [{
            ticks: {
               maxTicksLimit: 9,
               stepSize: 300,
               callback: function(value, index, values) {
                  return value + " €";
               }
            }
         }]
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chartA"></canvas>

Leave a comment