Chart.jsレンダリングチャートのツールチップの外観を調整する

Question

Chart.js 2.4.0でレンダリングした折れ線グラフに表示されるツールチップを調整することはできますか？

最近、xとyの両方の値とデータセットの名前が表示されます。私はデータセットの名前だけが必要です。

Answer 1

ツールチップの設定をオプションで変更できます。ツールチップには、コールバックオブジェクトがあります。この場合、タイトルには、ツールチップに付けるタイトルを返すカスタム関数を設定します。
[サンプルコード】以下

var chartInstanceHoverModeNearest = new Chart(ctx, { 
      type: 'bar', 
      data: data, 
      options:{ 
       events:["click"], 
       title : { 
        display : true 
       }, 
       scales: { 
        xAxes: [{ 
         categorySpacing: 0 
        }] 
       }, 
       tooltips: { 
        enabled: true, 
        callbacks : { 
         title : function(){ 
          return "Your Custom Title"; 
         }, 
         label : function(){ 
          return ""; 
         } 
        } 
       } 
      } 
     }); 

は、コールバックオブジェクトのメソッドです。もっと拡張したい場合は、これらのメソッドをオーバーライドしてカスタム機能を提供することができます。

callbacks : { 
    afterBody:(), 
    afterFooter:(), 
    afterLabel:(), 
    afterTitle:(), 
    beforeBody:(), 
    beforeFooter:(), 
    beforeLabel:(), 
    beforeTitle:(), 
    footer:(), 
    label:(tooltipItem, data), 
    labelColor:(tooltipItem, chartInstance), 
    title:(tooltipItems, data) 
}