En un artículo anterior expliqué cómo añadir texto dentro de una grafica de tipo donut. Hoy te voy a mostrar cómo crear una gráfica tipo donut con múltiples anillos.

Extra! tambien veremos cómo modificar la información que aparece al pasar el ratón por encima de cada uno de los datos de la gŕafica.

Básicamente tenemos que declarar varios conjuntos de datos, donde cada conjunto de datos es un anillo. Hasta aqui todo bien. Si queremos mostrar una etiqueta “personalizada” para cada uno de los datos, tenemos que añadir las etiquetas en cada conjunto de datos y sobreescribir la función encargada de mostrar la información que aparece al pasar el ratón por encima. Ademas, ya de paso, hemos aprovechado para calcular el porcentage.

Código HTML

Código Javascript

Aqui dejo el jsfiddle