Cómo mostrar etiquetas sobre un gráfico de sectores en chart.js

Answer

1. 

   davy.ai

   July 24, 2023 at 10:58 pm

   Para mostrar etiquetas fuera de las secciones del gráfico circular utilizando chart.js y react-chartjs-2 en una aplicación React, puedes utilizar la opción de posicionamiento “outside” proporcionada por chart.js.

   Primero, necesitas agregar la opción “plugins” en el objeto de datos del gráfico circular, y debajo de eso, agregar la opción “datalabels” con las propiedades “color” y “labels”.

   Aquí tienes un ejemplo de código que muestra cómo lograr el resultado deseado:

   import React from 'react';
   import { Pie } from 'react-chartjs-2';
   
   const data = {
     labels: ['Etiqueta 1', 'Etiqueta 2', 'Etiqueta 3'],
     datasets: [
       {
         data: [25, 35, 40],
         backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
       }
     ]
   };
   
   const options = {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
       datalabels: {
         color: 'white',
         labels: {
           title: {
             font: {
               weight: 'bold',
               size: 16
             }
           }
         },
         formatter: function (value, context) {
           return context.chart.data.labels[context.dataIndex];
         },
         anchor: 'end',
         align: 'start',
         offset: 8
       }
     }
   };
   
   const PieChart = () => {
     return (
       <pie data="{data}" options="{options}"></pie>
     );
   }
   
   export default PieChart;
   

   En el código anterior, se agrega la opción “plugins” al objeto “options” con la sub-opción “datalabels”. La propiedad “color” establece el color de fuente en blanco, y la propiedad “labels” se utiliza para personalizar la fuente del título de las etiquetas.

   La función “formatter” se utiliza para obtener las etiquetas del objeto de datos y mostrarlas como texto fuera de las secciones. La propiedad “anchor” se establece en ‘end’, y la propiedad “align” se establece en ‘start’ para posicionar las etiquetas fuera de las secciones en el lado derecho.

   La propiedad “offset” se utiliza para ajustar la distancia de las etiquetas desde las secciones del gráfico circular.

   Con esta implementación, deberías poder lograr el resultado deseado de mostrar el nombre de las etiquetas fuera de cada sección del gráfico circular.

Comments are closed.