Valores y porcentajes de gráficas sobre ChartJS

Hace un tiempo mientras trabajaba con un sitio que usaba gráficas creadas con ChartJS y éstas solo permitían mostrar los valores al pasar el puntero del ratón por encima, en ese momento me hacía una pregunta, ¿Cómo le podría colocar no solo los valores sino también los porcentajes y los mismos no se sobrepusieran uno encima del otro? Las gráficas ya estaban creadas en aquel entonces, solo faltaba cambiar el funcionamiento de las mismas. Hoy les traigo la solución a las gráficas de tipo pieChart(circular).

Antes quiero comentarles que este artículo es para aquellos que tienen conocimiento básico o que ya hayan trabajado antes con chart.js.

Ahora bien, manos a la obra, lo primero que haremos es integrar la librería de jquery y de chartJS a nuestro sitio, luego colocar un contenedor en el sitio para mostrar la gráfica.

<div id=”grafica”></div>

El siguiente paso es crear un fichero js o en el mismo sitio, abrir una etiqueta javascript para colocar el código que nos facilitará ver la gráfica con valores y porcentajes.

Declaramos una variable y le colocamos el siguiente código:

var grafica = $("#grafica").get(0).getContext("2d");

A continuación le pondré la solución y luego abajo le doy una breve explicación de las líneas más importantes, o las líneas que resuelven el problema de los valores y porcentajes.

var pieChart = new Chart(grafica, {

        type: 'pie',

        data: {

        labels: ["Primero","Segundo","Tercero","Cuarto"],

        datasets: [{

            backgroundColor: ["#2ecc71","#3498db","#f1c40f","#e74c3c","#4D5360"],

            data: [4, 8, 5, 2]

        }]},

        options: {

            legend: {

                display: false

            },

            events: false,

            animation: {

                duration: 1200,

                easing: "easeOutQuart",

                onComplete: function () {

                    var ctx = this.chart.ctx;

                    ctx.font='14px LatoRegular, Helvetica,sans-serif';

                    ctx.textAlign = 'center';

                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function (dataset) {

                        for (var i = 0; i < dataset.data.length; i++) {

                            var m = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,

                                    t = dataset._meta[Object.keys(dataset._meta)[0]].total,

                                 mR = m.innerRadius +

      (m.outerRadius - m.innerRadius) / 2,

                                sA = m.startAngle,

                                eA = m.endAngle,

                                mA = sA + (eA - sA)/2;

                            var x = mR * Math.cos(mA);

                            var y = mR * Math.sin(mA);

                            ctx.fillStyle = '#fff';

                            var p = String(Math.round(dataset.data[i]/total*100)) + "%";

                            if(dataset.data[i] > 0) {

                                ctx.fillText(dataset.data[i], m.x + x, m.y + y-10);

                                ctx.fillText(p, m.x + x, m.y + y + 5);

                            }

                        }

                    });

                }

            }

        }

    });

Todo el código es importante, pero las líneas que están en negrita son las que permite que en la gráfica de tipo circular se muestren los valores y porcentajes. Espero que este pequeño artículo le pueda ayudar.