componentes
/
charts
/
chart-3
Chart 3

Vista previa
Dependencias
Terminal
```
npm install chart.js react-chartjs-2
```
Código

'use client';

import { Line } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

const Chart3 = () => {
  return (
    <div className="w-full md:col-span-2 relative h-[50vh]">
      <Line
        className="w-full"
        data={{
          labels: [
            'Enero',
            'Febrero',
            'Marzo',
            'Abril',
            'Mayo',
            'Junio',
            'Julio',
            'Agosto',
            'Septiembre',
            'Noviembre',
            'Diciembre',
          ],
          datasets: [
            {
              label: 'Diseño',
              data: [133, 512, 698, 147, 523, 52, 239, 78, 79, 422, 577, 699],
              borderWidth: 1,
              borderColor: 'rgb(255, 150, 15)',
              backgroundColor: 'rgba(255, 150, 15, .4)',
            },
            {
              label: 'Capital Humano',
              data: [56, 1059, 344, 333, 412, 745, 749, 196, 179, 253, 456, 745],
              borderWidth: 1,
              borderColor: 'rgb(15, 153, 255)',
              backgroundColor: 'rgba(15, 153, 255, .4)',
            },
            {
              label: 'Proyectos',
              data: [569, 145, 855, 633, 212, 245, 249, 596, 779, 853, 856, 345],
              borderWidth: 1,
              borderColor: 'rgb(128, 15, 255)',
              backgroundColor: 'rgba(128, 15, 255, .4)',
            },
          ],
        }}
        options={{
          plugins: {
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: 'Tickets por departamento',
            },
          },
          maintainAspectRatio: false,
          responsive: true,
        }}
      />
    </div>
  );
};

export default Chart3;
Chart 3

Vista previa

Dependencias

Terminal

Código
