Chart.js 2.0 棒グラフに任意のTooltipを常時表示したい

Question

###前提・実現したいこと
Chart.js 2.0 で棒グラフを実装しました。
各棒グラフ上部センターにデフォルトのTooltipとは別に
以下のように項目に任意の文字列を常時表示させたいと考えております。
![
マニュアル上ではこの点についての記述を見つけられず
方法をご教示いただければ幸いです。

###補足情報(言語/FW/ツール等のバージョンなど)
利用バージョン：Chart.js 2.4.0

###試したこと
別CANVASに吹き出しを書込み合成してみましたが
レスポンシブにしているため画面サイズ変更に伴う
グラフサイズ変更時の座標がずれてしまい
Chart.js自体（Tooltip等）で処理しようと考えました。

###2017/04/10追記
＜以下記載のScript表示結果＞
※Januaryにマウスオーバーしたとき

＜解決できた点＞
特定のBarのTooltipsを常時表示する
＜問題点＞
１．他のBarもマウスオーバーすると結局Tooltipsが表示されてしまう。
２．Tooltipsに任意の文字列を表示することができない。
（不要なMarchや判例の■マークが残ってしまう）
３．Barのセンター上部に表示したいが右斜め上に表示されてしまう。
（複数表示の際にTooltipsが重ならないようにするため）

<div class="chart_container"><canvas id="myChart" width="320" height="180"></canvas></div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1,
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
};

var cnt;
Chart.pluginService.register({
    beforeRender: function (chart) {
        if (chart.config.options.showAllTooltips) {
            // create an array of tooltips
            // we can't use the chart tooltip because there is only one tooltip per chart
            chart.pluginTooltips = [];
            chart.config.data.datasets.forEach(function (dataset, i) {
                chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                    chart.pluginTooltips.push(new Chart.Tooltip({
                        _chart: chart.chart,
                        _chartInstance: chart,
                        _data:  chart.data,
                        _options: chart.options.tooltips,
                        _active: [sector]
                    }, chart));
                });
            });

            // turn off normal tooltips
            chart.options.tooltips.enabled = false;
        }
    },
    afterDraw: function (chart, easing) {
        if (chart.config.options.showAllTooltips) {
            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
            if (!chart.allTooltipsOnce) {
                if (easing !== 1)
                    return;
                chart.allTooltipsOnce = true;
            }

            cnt = 1;
            // turn on tooltips
            chart.options.tooltips.enabled = true;
            Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
              if (cnt == 3){ //例として3つ目のBarのみ表示するように設定
                tooltip.initialize();
                tooltip.update();
                // we don't actually need this since we are not animating tooltips
                tooltip.pivot();
                tooltip.transition(easing).draw();
                chart.options.tooltips.enabled = true;
              }
              cnt = cnt +1;
            });
     }
   }
})

var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
           tooltips: {
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return 'AAA'; 
                    }
                }
            },
        showAllTooltips: true,
	barPercentage:1, responsive: true,
      	legend: { display: false },
	scales: {
          xAxes: [{ display: true, stacked: false, gridLines: { display: false } }],
          yAxes: [{ display: true, 
                    scaleLabel: { display: true, labelString: 'Y LABEL', fontFamily: 'monospace', fontSize: 14 },
                    ticks: { max: 100, min: 0, stepSize: 20}
                 }]
        }
  }
});
</script>

Answer 1

【Chart.jsの棒グラフ（Bar）で、数値（data）を常時表示にする方法 | Webスクリプターがつぶやくブログ】
http://blog2.gods.holy.jp/?eid=201

↑ こんな感じでしょうか？

---

追記：

                //chart.options.tooltips.enabled = true;
                chart.options.tooltips.enabled = false; // ← 

                callbacks: {
                    label: function(tooltipItems, data) { 
                        //return 'AAA';
                        return;   // ← 
                    },
                    title: function(tooltipItems, data) { 
                        return 'AAA';
                    }
```**動くサンプル：**[https://jsfiddle.net/b3w5gnqq/](https://jsfiddle.net/b3w5gnqq/)

Comments

[tera_ina]

kei344様　ありがとうございます。
当該URLは見ていたのですがChart.js 2.0以降での
表記方法がわからず実現できませんでした。
2.0以降で棒グラフは以下のように呼び出しております。
var ctx = document.getElementById('myChart').getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
ご教示頂ければ幸いです。

[kei344]

あぁ、それは失礼しました。では下記のあたりを試してみては？

【How do I get tooltips to always show in V2? · Issue #1861 · chartjs/Chart.js · GitHub】
https://github.com/chartjs/Chart.js/issues/1861

[tera_ina]

ありがとうございました。お陰様でTooltipsの常時表示を行う事ができました。
後は、特定のBarのみ、任意の文字列を表示できれば良いのですが、
前者（特定のBarのみ）については、特定のBarのみ常時表示することはできたのですが
他のBarもマウスオーバーすると結局表示されてしまう現象を解消できませんでした。
後者の任意の文字列については全く解決することができない状況です。
Tooltipsで表示される内容の配列などを直接設定できればと思うのですが
解決策が見いだせない状況です。ご教示いただくことは可能でしょうか。

[kei344]

質問文にコードを書くなりしてください。どう出来たかもわからない状態でのアドバイスは出来ません。

[tera_ina]

大変失礼しました。

[kei344]

「質問文」に追記してください。

[tera_ina]

ご指摘ありがとうございます。質問文を更新しました。

[tera_ina]

本当にありがとうございます！おかげさまで実現できました。