Chart.js - 折れ線グラフツールチップのラベル

Question

折れ線グラフを使用してデータセットにカーソルを合わせると、データセットの各項目の横にカラーキーが表示されます。ただし、キーとテキストの間にスペースはありません。

少なくとも、私はここにいくつかのパディングを追加できるようにしたいと思いますが、これらのキーの四角形を縮小したり、角を丸くしたりすることもできます。

この小さな四角形を制御する線グラフまたはツールチップの設定は表示されません。

私は多分それがLegends設定からオプションを共有していると思っていました。

JS Bin Example

私はChart.bundle.min.js 2.3.0を使用しています。

Answer 1

私はいくつかのパディングを追加するこのような何かをしました。理想的ではありませんが、私は別の方法を知らない。

基本的に Edit tooltips in ChartJS

を参照してください、おそらくもっと親切手動

return ' ' + ... + tooltipItem.yLabel; 

パディングを追加

tooltips: { 
    callbacks: { 
     title: function(tooltipItem, data) { 
     return tooltipItem[0].xLabel; 
     }, 
     label: function(tooltipItem, data) { 
     return ' ' + data.datasets[tooltipItem.datasetIndex].label + ' ' + tooltipItem.yLabel; 
     }