Chart.js 2.xのツールチップをすべて上にレンダリングする方法

Question

私はChart.js 2.6.0を使用しています。私はカスタムグラフィックをレンダリングするための例を取り上げています。ライブデモはhttps://jsfiddle.net/arminzia/bm4ezdur/にあります。

基本的に、各バーの上に円を描いて値を表しています。ここにコードがあります：

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    responsive: true, 
    maintainAspectRatio: false, 
    data: { 
     labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"], 
     datasets: [{ 
      data: [16, 87, 56, 35, 88, 60, 12], 
      backgroundColor: "#4082c4" 
     }] 
    }, 
    options: { 
      "hover": { 
      "animationDuration": 0 
     }, 
     "animation": { 
      "duration": 1, 
         "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'; 

          this.data.datasets.forEach(function (dataset, i) { 
           var meta = chartInstance.controller.getDatasetMeta(i); 
           meta.data.forEach(function (bar, index) { 
            var data = dataset.data[index] + '$';        

        var centerX = bar._model.x; 
        var centerY = bar._model.y - 10; 
        var radius = 22; 

        ctx.beginPath(); 
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
        ctx.fillStyle = 'white'; 
        ctx.fill(); 
        ctx.lineWidth = 1; 
        ctx.strokeStyle = '#4082c4'; 
        ctx.stroke(); 

        ctx.fillStyle = '#4082c4'; 
        ctx.font = "bold 14px Calibri"; 
        ctx.fillText(data, bar._model.x, bar._model.y); 
           }); 
          }); 
         } 
     }, 
      legend: { 
      "display": false 
     }, 
     tooltips: { 
      "enabled": true 
     }, 
     scales: { 
      yAxes: [{ 
        display: true, 
        gridLines: { 
        display : true 
       }, 
       ticks: { 
         display: true, 
        beginAtZero:true, 
        max: 140 
       } 
      }], 
      xAxes: [{ 
        barThickness: 40, 
        gridLines: { 
        display : false 
       }, 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 

ここで問題は、これらのサークルの下にツールチップが表示されていないことです。私はこの問題に長時間苦労してきており、何か解決策やドキュメントが役に立たないことはありませんでした。

これらの円の上にツールチップをレンダリングするにはどうすればよいですか？実際にすべての上に、z-index：1000のようなものがあります。

Answer 1

この投稿を更新しないでください。答えは、外部（カスタム）ツールチップを使用することです。これは基本的にHTML要素をレンダリングしてツールチップを作成しています。詳しくはhereをご覧ください。