title: Chart.js - Tooltips overlapped by bar values
body: <p>In bar charts, label above bars overlaps tooltip. Please see screenshots below.</p>
  <p><a href="https://prnt.sc/tspjt6" rel="nofollow noreferrer">Bar chart - original</a></p>
  <p><a href="https://prnt.sc/tspjyl" rel="nofollow noreferrer">Bar chart - tooltip problem</a></p>
  <p>Please see my code below.</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Single Bar Chart&lt;/title&gt;
      &lt;script src=&quot;Chart.min.js&quot;&gt;&lt;/script&gt;
      &lt;style&gt;
      canvas {
          border:1px solid #367ee9;
      }
      #container{
          width: 950px;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id=&quot;container&quot;&gt;
          &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          var barChartData = {
              labels: [&quot;Jul 19&quot;, &quot;Aug 19&quot;, &quot;Sep 19&quot;, &quot;Oct 19&quot;, &quot;Nov 19&quot;, &quot;Dec 19&quot;, &quot;Jan 20&quot;, &quot;Feb 20&quot;, &quot;Mar 20&quot;, &quot;Apr 20&quot;, &quot;May 20&quot;, &quot;Jun 20&quot;],
              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: [&quot;bar1_action&quot;, &quot;bar2_action&quot;, &quot;bar3_action&quot;, &quot;bar4_action&quot;, &quot;bar5_action&quot;, &quot;bar6_action&quot;, &quot;bar7_action&quot;, &quot;bar8_action&quot;, &quot;bar9_action&quot;, &quot;bar10_action&quot;, &quot;bar11_action&quot;, &quot;bar12_action&quot;],
                  data_alt: [&quot;Click here to see results of bar1_alt&quot;, &quot;bar2_alt&quot;, &quot;bar3_alt&quot;, &quot;bar4_alt&quot;, &quot;bar5_alt&quot;, &quot;bar6_alt&quot;, &quot;bar7_alt&quot;, &quot;bar8_alt&quot;, &quot;bar9_alt&quot;, &quot;bar10_alt&quot;, &quot;bar11_alt&quot;, &quot;bar12_alt&quot;],
              }]
  
          };
  
          window.onload = function() {
              var ctx = document.getElementById('canvas').getContext('2d');
              window.myBar = new Chart(ctx, {
                  type: 'bar',
                  data: barChartData,
                  options: {
                      responsive: true,
                      onHover: (event, chartElement) =&gt; {
                          event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
                      },
                      hover: {
                          animationDuration: 0,
                      },
                      animation: {
                          duration: 1000,
                          onComplete: function () {
                              var chartInstance = this.chart,
                              ctx = chartInstance.ctx;
  
                              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 = &quot;$&quot; + val.toLocaleString();
                                      if(val &gt; -1){
                                          ctx.fillText(data, bar._model.x, bar._model.y - 5);
                                      }
                                      else{
                                          ctx.fillText(data, bar._model.x, bar._model.y + 14);
                                      }
  
                                  });
                              });
                          }
                      },
                      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();
                                  }
                              },
                          }]
                      }
                  }
              });
          };
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>Is there any way to avoid this?
  I tried to find details about setting z-index in above code. But, I haven't got much help.</p>
  <p>Other than this, the graphs work great.</p>
  <p>Thanks,
  Sandeep</p>