[Chartjs]-Chart.JS customization – how to debug?

2👍

Better draw the labels using a plugin, instead of drawing on animation compete (this is the culprit).

plugins: [{
   animationCompleted: false,
   afterDatasetsDraw: function(chart, ease) {
      if (!this.animationCompleted && ease !== 1) return;
      this.animationCompleted = true;
      var ctx = chart.ctx;
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.fillStyle = "grey";
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      var dataset = chart.data.datasets[1];
      for (var i = 0; i < dataset.data.length; i++) {
         for (var key in dataset._meta) {
            var model = dataset._meta[key].data[i]._model;
            ctx.fillText(dataset.data[i], model.x, model.y - 1);
         } //for key
      } //for i
   }
}]

* add this followed by your chart options.

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

var ctx = document.getElementById("testChart").getContext("2d");
// ctx.canvas.width = 300;
// ctx.canvas.height = 300;

var data = {
   labels: ["uno", "dos", "tres", "quattro"],
   datasets: [{
         label: "Invisible",
         data: [0, 20, 60, 0],
         backgroundColor: "transparent",
      }, {
         label: "Dollar",
         data: [20, 40, 30, 90],
         backgroundColor: "lightgreen",
      }, ] //datasets
};

var options = {
   responsive: true,
   scales: {
      xAxes: [{
         display: true,
         stacked: true,
      }, ], //xAxes
      yAxes: [{
            display: true,
            stacked: true,
            ticks: {
               beginAtZero: true,
               min: 0,
               max: 120,
            } //ticks
         }, ] //yAxes
   }, //scales


   title: {
      display: true,
      text: "Waterfall chart",
   },
   legend: {
      display: false,
      labels: {
         boxWidth: 80,
         fontColor: 'green'
      }
   },

   tooltips: {
      enabled: false
   }, //tooltips
}; //options


var myBarChart = new Chart(ctx, {
   type: 'bar',
   data: data,
   options: options,
   plugins: [{
      animationCompleted: false,
      afterDatasetsDraw: function(chart, ease) {
         if (!this.animationCompleted && ease !== 1) return;
         this.animationCompleted = true;
         var ctx = chart.ctx;
         ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
         ctx.fillStyle = "grey";
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
         var dataset = chart.data.datasets[1];
         for (var i = 0; i < dataset.data.length; i++) {
            for (var key in dataset._meta) {
               var model = dataset._meta[key].data[i]._model;
               ctx.fillText(dataset.data[i], model.x, model.y - 1);
            } //for key
         } //for i
      }
   }]
});
p,
canvas {
   border: 1px solid red;
}

#canvasWrapper {
   border: 1px solid green;
   padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<p>Lorem</p>
<p>ipsum</p>
<div id="canvasWrapper">
   <canvas id="testChart"></canvas>
</div>
<p>Lorem</p>
<p>ipsum</p>

Refer here to learn more about ChartJS Plugins.

Leave a comment