Não precisa mudar nada no código do seu gráfico se quiser mostrar apenas quantidade, apenas inclua referência para o chartjs-plugin-datalabels.min.js.
Mas como você precisa da porcentagem é necessário fazer o calculo dela como você mesmo identificou e resolveu. Eu adicionei seu trecho ao gráfico para facilitar para quem precisar do recurso.
O trecho que cacular e formata a porcentagem está no parâmetro formatter:
var chartData = [{"visitor": 39, "visit": 1}, {"visitor": 18, "visit": 2}, {"visitor": 9, "visit": 3}, {"visitor": 5, "visit": 4}, {"visitor": 6, "visit": 5}, {"visitor": 5, "visit": 6}]
var visitorData = [],
visitData = [];
for (var i = 0; i < chartData.length; i++) {
visitorData.push(chartData[i]['visitor'])
visitData.push(chartData[i]['visit'])
}
var myChart = new Chart(document.getElementById('mychart'), {
type: 'doughnut',
animation:{
animateScale:true
},
data: {
labels: visitData,
datasets: [{
label: 'Visitor',
data: visitorData,
backgroundColor: [
"#a2d6c4",
"#36A2EB",
"#3e8787",
"#579aac",
"#7dcfe8",
"#b3dfe7",
]
}]
},
options: {
responsive: true,
legend: false,
legendCallback: function(chart) {
var legendHtml = [];
legendHtml.push('<ul>');
var item = chart.data.datasets[0];
for (var i=0; i < item.data.length; i++) {
legendHtml.push('<li>');
legendHtml.push('<span class="chart-legend" style="background-color:' + item.backgroundColor[i] +'"></span>');
legendHtml.push('<span class="chart-legend-label-text">' + item.data[i] + ' person - '+chart.data.labels[i]+' times</span>');
legendHtml.push('</li>');
}
legendHtml.push('</ul>');
return legendHtml.join("");
},
tooltips: {
enabled: true,
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
var indice = tooltipItem.index;
return data.datasets[0].data[indice] + " person visited " + data.labels[indice] + ' times';
}
}
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value*100 / sum).toFixed(2)+"%";
return percentage;
},
color: '#fff',
}
}
}
});
$('#my-legend-con').html(myChart.generateLegend());
console.log(document.getElementById('my-legend-con'));
.canvas-con {
display: flex;
align-items: center;
justify-content: center;
min-height: 365px;
position: relative;
}
.canvas-con-inner {
height: 100%;
}
.canvas-con-inner, .legend-con {
display: inline-block;
}
.legend-con {
font-family: Roboto;
display: inline-block;
}
.legend-con ul {
list-style: none;
}
.legend-con li {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.legend-con li span {
display: inline-block;
}
.legend-con li span.chart-legend {
width: 25px;
height: 25px;
margin-right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<div class="canvas-con">
<div class="canvas-con-inner">
<canvas id="mychart" height="250px"></canvas>
</div>
<div id="my-legend-con" class="legend-con"></div>
</div>