score:1

Accepted answer

at the begin of the animation.oncomplete callback function, you should add the following lines:

ctx.save();
ctx.globalcompositeoperation='destination-over';

and at the end of animation.oncomplete, you need to invoke ctx.restore().

for further details about ctx.globalcompositeoperation='destination-over', have a look at this answer.

please take a look at your amended code and see how it works.

var barchartdata = {
  labels: ["jul 19", "aug 19", "sep 19", "oct 19", "nov 19", "dec 19", "jan 20", "feb 20", "mar 20", "apr 20", "may 20", "jun 20"],
  datasets: [{
    //label: 'jan 20',
    backgroundcolor: '#367ee9',
    bordercolor: '#367ee9',
    borderwidth: 1,
    data: [33111, 27510, 27377, 14947, 4312, 7279, 70988, 2903, 29575, 65, 9861, 3416],
    data_action: ["bar1_action", "bar2_action", "bar3_action", "bar4_action", "bar5_action", "bar6_action", "bar7_action", "bar8_action", "bar9_action", "bar10_action", "bar11_action", "bar12_action"],
    data_alt: ["click here to see results of bar1_alt", "bar2_alt", "bar3_alt", "bar4_alt", "bar5_alt", "bar6_alt", "bar7_alt", "bar8_alt", "bar9_alt", "bar10_alt", "bar11_alt", "bar12_alt"],
  }]
};

var ctx = document.getelementbyid('canvas').getcontext('2d');
window.mybar = new chart(ctx, {
  type: 'bar',
  data: barchartdata,
  options: {
    responsive: true,
    onhover: (event, chartelement) => {
      event.target.style.cursor = chartelement[0] ? 'pointer' : 'default';
    },
    hover: {
      animationduration: 0,
    },
    animation: {
      duration: 1000,
      oncomplete: function() {
        var chartinstance = this.chart,
          ctx = chartinstance.ctx;        
          ctx.save();
          ctx.globalcompositeoperation='destination-over';
        ctx.font = chart.helpers.fontstring(chart.defaults.global.defaultfontsize, chart.defaults.global.defaultfontstyle, chart.defaults.global.defaultfontfamily);
        ctx.textalign = 'center';
        ctx.textbaseline = 'bottom';
        //ctx.canvas.style.zindex = 5;
        this.data.datasets.foreach(function(dataset, i) {
          var meta = chartinstance.controller.getdatasetmeta(i);
          meta.data.foreach(function(bar, index) {
            var val = dataset.data[index];
            var data = "$" + val.tolocalestring();
            if (val > -1) {
              ctx.filltext(data, bar._model.x, bar._model.y - 5);
            } else {
              ctx.filltext(data, bar._model.x, bar._model.y + 14);
            }
          });
        });
        ctx.restore();
      }
    },
    onclick: function(evt) {
      var firstpoint = this.getelementatevent(evt)[0];
      if (firstpoint) {
        var value = this.data.datasets[firstpoint._datasetindex].data_action[firstpoint._index];
        alert(value);
      }
    },
    legend: {
      display: false,
      position: 'top',
      onhover: function() {
        event.target.style.cursor = 'pointer';
      },
    },
    title: {
      display: true,
      text: 'total benefits exceeded ($231,345) (claim date)',
      fontcolor: '#000',
      fontsize: '15',
    },
    tooltips: {
      yalign: 'top',
      displaycolors: false, // hide color box
      ypadding: 10,
      xpadding: 10,
      backgroundcolor: '#fff',
      bordercolor: '#000',
      borderwidth: 1,
      bodyfontfamily: 'tahoma,verdana,arial, helvetica, sans-serif',
      bodyfontsize: 13,
      bodyfontcolor: '#000',
      callbacks: {
        title: function(tooltipitem, data) {
          return; // hide title
        },
        label: function(tooltipitem, data) {
          barcount = tooltipitem.index;
          barindex = tooltipitem.datasetindex;
          var label = data.datasets[barindex].data_alt[barcount];
          return label;
        },
      }
    },
    scales: {
      yaxes: [{
        display: false,
        scalelabel: {
          display: true,
          labelstring: 'denied charges ($)',
          fontcolor: '#000',
          fontsize: '15',
          fontstyle: 'bold',
        },
        ticks: {
          callback: function(value, index, values) {
            return '$' + value.tolocalestring();
          }
        },
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<div id="container">
  <canvas id="canvas"></canvas>
</div>


Related Query

More Query from same tag