3👍
✅
You can accomplish that using the following tooltips label callback function and a chart plugin …
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var _data = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var data = /\./.test(_data) ? _data.toFixed(2) : _data;
return label + ' - ' + data + '%';
}
}
}
ᴄʜᴀʀᴛ ᴘʟᴜɢɪɴ
plugins: [{
beforeInit: function(c) {
var data = c.data.datasets[0].data
var data_sum = data.reduce((a, b) => a + b, 0);
var each_one = 100 / data_sum;
c.data.datasets[0].data = data.map(e => e * each_one);
}
}]
add the plugin followed by your chart options
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
$(document).ready(function() {
$.ajax({
url: "https://istack.000webhostapp.com/json/t5.json",
method: "GET",
success: function(data) {
var source = [];
var count = [];
for (var i in data) {
source.push(data[i].source);
count.push(+data[i].number);
}
var config = {
type: 'doughnut',
data: {
datasets: [{
data: count,
backgroundColor: [
'rgba(59, 89, 152, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255,1)',
'rgba(255, 159, 64, 1)'
]
}],
labels: source
},
options: {
responsive: false,
legend: {
position: 'bottom',
},
title: {
display: false,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var _data = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var data = /\./.test(_data) ? _data.toFixed(2) : _data;
return label + ' - ' + data + '%';
}
}
}
},
plugins: [{
beforeInit: function(c) {
var data = c.data.datasets[0].data
var data_sum = data.reduce((a, b) => a + b, 0);
var each_one = 100 / data_sum;
c.data.datasets[0].data = data.map(e => e * each_one);
}
}]
}
var ctx = $('#chartCanvas');
window.myDoughnut = new Chart(ctx, config);
},
error: function(data) {
console.log(data);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chartCanvas" height="200"></canvas>
0👍
$(document).ready(function() {
$.ajax({
url: "https://istack.000webhostapp.com/json/t5.json",
method: "GET",
success: function(data) {
var source = [];
var count = [];
for (var i in data) {
source.push(data[i].source);
count.push(+data[i].number);
}
var config = {
type: 'doughnut',
data: {
datasets: [{
data: count,
backgroundColor: [
'rgba(59, 89, 152, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255,1)',
'rgba(255, 159, 64, 1)'
]
}],
labels: source
},
options: {
responsive: false,
legend: {
position: 'bottom',
},
title: {
display: false,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var _data = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var data = /\./.test(_data) ? _data.toFixed(2) : _data;
return label + ' - ' + data + '%';
}
}
}
},
plugins: [{
beforeInit: function(c) {
var data = c.data.datasets[0].data
var data_sum = data.reduce((a, b) => a + b, 0);
var each_one = 100 / data_sum;
c.data.datasets[0].data = data.map(e => e * each_one);
}
}]
}
var ctx = $('#chartCanvas');
window.myDoughnut = new Chart(ctx, config);
},
error: function(data) {
console.log(data);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chartCanvas" height="200"></canvas>
Source:stackexchange.com