[Chart.js] レーダーチャートの値が表示されないバグをTooltipカスタムでなんとかする

Chart.jsで遊んでたらバグに引っかかってしまった。

Chart.js ver2.8.0で発生中、次バージョンで修正がリリースされる予定。

解決策がissueに共有されてました：

options: { 
     tooltips: {
       enabled: true,
       callbacks: {
         label: function(tooltipItem, data) {
           return data.datasets[tooltipItem.datasetIndex].label + ' : ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
         }
       }
    },
  }

Tooltopオプションのcallbackでlabelを操作するものです。
これはツールチップで表示される値に単位などつけたい場合にも使える方法です。

以下は公式ドキュメントのデモソースにオプション追加したサンプル。

See the Pen
Chart.js Radar Chart(bug fix) by Tenderfeel (@Tenderfeel)
on CodePen.

ver2.5.0では発生しないので、RadarChartドキュメントのサンプルだと値表示されてるんだけど、動作サンプルのRadarChartはver2.8.0なので値が表示されてません。

オプション：目盛りの設定

デフォルトだと渡された値から範囲を自動で作ってくれるんだけど、
あらかじめ決まっている最大値と最小値の範囲内で表示したいという場合はticksオプションを使う：

scale: {
  display: true,
  ticks: {
    min: 0,
    max: 5,
    stepSize: 1
    beginAtZero: true
  }
}

オプション：凡例を表示しない

datasetsが1種類だけで説明不要なら消し去ればいい：

legend: {
  display: false
},