Chart 1

• Vista previa

• Dependencias

  Terminal

  npm install chart.js react-chartjs-2

• Código

  'use client';
  
  import { Bar } from 'react-chartjs-2';
  import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
  
  ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
  
  const Chart1 = () => {
    return (
      <div className="w-full md:col-span-2 relative h-[50vh]">
        <Bar
          className="w-full"
          data={{
            labels: ['Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado', 'Domingo'],
            datasets: [
              {
                label: 'Ventas $',
                data: [18127, 22201, 19490, 17938, 24182, 17842, 22475],
                borderWidth: 1,
                borderColor: 'rgb(255, 15, 135)',
                backgroundColor: 'rgba(255, 15, 135, .4)',
              },
            ],
          }}
          options={{
            plugins: {
              legend: {
                position: 'top',
              },
              title: {
                display: true,
                text: 'Ingresos diarios',
              },
            },
            maintainAspectRatio: false,
            responsive: true,
          }}
        />
      </div>
    );
  };
  
  export default Chart1;