Reputation: 1953
I am new to Chart.js. I am making a line chart but I am stuck. I need to display % in a tooltip, but when I add %, the result is not as expected. I have gone to other posts, and none of the solutions helped me out.
HTML:
<canvas id="myChart2"></canvas>
JS:
window.onload = function() {
var ctx2 = document.getElementById('myChart2').getContext('2d');
var data = [
{date:'08-05-2017', run_rate: 50},
{date:'08-06-2017', run_rate: 40},
{date:'08-07-2017', run_rate: 30},
{date:'08-08-2017', run_rate: 10},
{date:'08-09-2017', run_rate: 6},
{date:'08-10-2017', run_rate: 78},
{date:'08-11-2017', run_rate: 32},
{date:'08-12-2017', run_rate: 24}
];
var dates = data.map(function(obj){
return obj.date;
});
var count = data.map(function(obj){
return obj.run_rate;
});
var myChart = new Chart(ctx2, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: '%',
data: count,
backgroundColor: "rgba(38, 82, 123, 0.5)"
}]
},
options: {
legend: {
display: false
},
maintainAspectRatio: false,
responsive: true,
tooltips: {titleFontSize:12, bodyFontSize:12},
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: false,
labelString: 'Date',
fontColor: '#000000'
}
}],
yAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000',
callback: function(value){
return value + "%"
}
},
scaleLabel: {
display: false,
labelString: '',
fontColor: '#000000'
}
}]
}
//Scales Object Ends
}
//options object ends
});
//End of function
}()
I am able to display a number in the Y axis as num %
as you can see in the callback function I made on YAxes, but when I try in a tooltip is not the same result. I need to be able to display num %
in a tooltip as well. Any knowledge will be appreciated. Thanks.
Upvotes: 2
Views: 2041
Reputation: 32889
You can use a callback function for tooltips label, to display a %
sign along with the data value, as such :
tooltips: {
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
return xLabel + ': ' + yLabel + '%';
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var ctx2 = document.getElementById('myChart2').getContext('2d');
var data = [{
date: '08-05-2017',
run_rate: 50
}, {
date: '08-06-2017',
run_rate: 40
}, {
date: '08-07-2017',
run_rate: 30
}, {
date: '08-08-2017',
run_rate: 10
}, {
date: '08-09-2017',
run_rate: 6
}, {
date: '08-10-2017',
run_rate: 78
}, {
date: '08-11-2017',
run_rate: 32
}, {
date: '08-12-2017',
run_rate: 24
}];
var dates = data.map(function(obj) {
return obj.date;
});
var count = data.map(function(obj) {
return obj.run_rate;
});
var myChart = new Chart(ctx2, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'Line',
data: count,
backgroundColor: "rgba(38, 82, 123, 0.5)"
}]
},
options: {
legend: {
display: false
},
maintainAspectRatio: false,
responsive: true,
tooltips: {
titleFontSize: 12,
bodyFontSize: 12,
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
return xLabel + ': ' + yLabel + '%';
}
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: false,
labelString: 'Date',
fontColor: '#000000'
}
}],
yAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000',
callback: function(value) {
return value + "%"
}
},
scaleLabel: {
display: false,
labelString: '',
fontColor: '#000000'
}
}]
}
//Scales Object Ends
}
//options object ends
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart2"></canvas>
Upvotes: 2