A continuación te muestro cómo añadir texto dentro de una grafica de tipo donut en Chart.js

Chart.js es una libreria open source para crear gráficos en javascript basados en HTML5. Entre la amplia lista de gráficos disponibles de esta fantástica librería tenemos el donut (doughnut). Que básicamente es un gráfico de torta pero con un agujero en el centro … sorprendidos ¿verdad? 😉

Yo lo que quiero es aprovechar ese agujero del centro para añadir información, ya sea un simple texto o el total. Algo asi como los pop dots 😉

cómo añadir texto dentro de una grafica de tipo donut

Básicamente esto se consigue añadiendo un plugin e implementando el evento beforedraw. En mi ejemplo muestro el total pero podeis modificar el código para mostrar otra información.

Código HTML

Código Javascript

Aquí el código en jsfiddle

Si lo que queremos es utilizar el plugin en varias gráficas, entonces podemos registrar el plugin

Código Javascript (2)

Aquí el código en jsfiddle