Chart 2

• 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 Chart2 = () => {
    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: 'Compras $',
                data: [8526, 20562, 7623, 4323, 19568, 15700, 14555],
                borderWidth: 1,
                borderColor: 'rgb(255, 150, 15)',
                backgroundColor: 'rgba(255, 150, 15, .4)',
              },
              {
                label: 'Ventas $',
                data: [18127, 22201, 19490, 17938, 24182, 17842, 22475],
                borderWidth: 1,
                borderColor: 'rgb(15, 153, 255)',
                backgroundColor: 'rgba(15, 153, 255, .4)',
              },
            ],
          }}
          options={{
            plugins: {
              legend: {
                position: 'top',
              },
              title: {
                display: true,
                text: 'Compras y ventas diarias',
              },
            },
            maintainAspectRatio: false,
            responsive: true,
          }}
        />
      </div>
    );
  };
  
  export default Chart2;