Skip to main content
Adicionado trecho do AP que exibe o valor em porcentagem dentro do código que gera o gráfico.
Fonte Link
George Wurthmann
  • 4,4mil
  • 3
  • 18
  • 38

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>

Não precisa mudar nada no código do seu gráfico, apenas inclua referência para o chartjs-plugin-datalabels.min.js.

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';
                }
             }
         },
    }
});

$('#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>

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>
Fonte Link
George Wurthmann
  • 4,4mil
  • 3
  • 18
  • 38

Não precisa mudar nada no código do seu gráfico, apenas inclua referência para o chartjs-plugin-datalabels.min.js.

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';
                }
             }
         },
    }
});

$('#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>