Chart 4

• Vista previa

• Dependencias

  Terminal

  npm install chart.js react-chartjs-2

• Código

  'use client';
  
  import { Doughnut } from 'react-chartjs-2';
  import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
  
  ChartJS.register(ArcElement, Tooltip, Legend);
  
  const Chart4 = () => {
    return (
      <div className="w-full md:col-span-2 relative h-[50vh]">
        <Doughnut
          className="w-full"
          data={{
            labels: ['JavaScript', 'TypeScript', 'Python', 'Java', 'C#', 'Node'],
            datasets: [
              {
                label: '# de votos',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                  'rgba(255, 197, 15, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)',
                ],
                borderColor: [
                  'rgba(255, 197, 15, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)',
                ],
                borderWidth: 1,
              },
            ],
          }}
          options={{
            plugins: {
              legend: {
                position: 'top',
              },
              title: {
                display: true,
                text: 'Votos por el mejor lenguaje de programación',
              },
            },
            maintainAspectRatio: false,
            responsive: true,
          }}
        />
      </div>
    );
  };
  
  export default Chart4;