Chartjs-Chart.js – Tooltips overlapped by bar values

by

1👍

✅

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>

Leave a comment