chart.jsの棒グラフをカスタマイズする

Question

chart.js棒グラフでツールチップをカスタマイズしたいと思います。これは私のコードです：

$(function() { 
    var barData = no_houses_person 

var barOptions = { 
    scaleBeginAtZero: true, 
    scaleShowGridLines: true, 
    scaleGridLineColor: "rgba(0,0,0,.05)", 
    legend: { 
     display: true, 
     position: 'top' 
    }, 
    scaleGridLineWidth: 1, 
    barShowStroke: true, 
    barStrokeWidth: 1, 
    barValueSpacing: 5, 
    barDatasetSpacing: 1, 
    responsive: true, 
}; 
    var ctx = document.getElementById("barChart").getContext("2d"); 
    var myNewChart = new Chart(ctx, { 
    type: 'bar', 
    data: barData, 
    options: barOptions 
}); 
}); 

私はbarOptionsにtooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> example)",を追加しようとしているが、それは効果がありません。例えばあなただけのツールチップテキストを変更したい場合ので

Answer 1

Chart.jsが...、V2は+にObject interfacesへのテンプレートから移動

tooltips: { 
    callbacks: { 
     label: function(tooltipItem) { 
      return "$" + Number(tooltipItem.yLabel) + " and so worth it !"; 
     } 
    } 
} 

結果：

Codepen： Chart.js Custom Tooltip

複雑なツールチップのカスタマイズについては、github：のサンプルを参照してください。