How to format tool tip as currency in piechart chartJS? - ruby-on-rails

Question

I am using chartJS in my rails app and my chart code is added below. When hovering over sections I need to display as "Label name: $ 636"...Now when hovering it displays as "Label name: 636". The current chart with tooltip is
var ctx = document.getElementById('dollar-issue-area').getContext('2d');
var that = this;
this.chart = new Chart(ctx, {
type: 'pie',
data: {
labels: <%= raw dollar_per_type.collect { |k, v| k } %>,
datasets: [{
label: 'Number of tickets',
data: <%= raw dollar_per_type.collect { |k, v| v } %>,
backgroundColor: palette('tol-dv', <%= raw dollar_per_type.collect { |k, v| k }.length %>).map(function(hex) {return '#' + hex;})
}]
},
options: {
title:{
display: true,
text: 'Dollar per Sub Issue Type from <%= start_date %> to <%= end_date %>'
},
legend: {
display: true,
labels: {
display: false,
fontSize: 10
}
}
}
});

Answer 1

you can use a tooltips callback function.
here, the label callback is used to customize the tooltip content...
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data['labels'][tooltipItem['index']] + ': $' + data['datasets'][0]['data'][tooltipItem['index']];
}
}
}
see following working snippet...
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['confirmed', 'pending'],
datasets: [{
data: [67, 33],
backgroundColor: [
'rgba(41, 121, 255, 1)',
'rgba(38, 198, 218, 1)'
],
}]
},
options: {
title: {
display: true,
text: 'Dollar per Sub Issue Type'
},
legend: {
display: true,
labels: {
display: false,
fontSize: 10
}
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data['labels'][tooltipItem['index']] + ': $' + data['datasets'][0]['data'][tooltipItem['index']];
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>