No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
16H
47M
59S
Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Creando el componente Chart

17/31
Recursos

Aportes 6

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Instalamos estas dos dependencias

npm i chart.js react-chartjs-2

Clase #17: Creando el componente Chart 17/31 馃搱


Chart.js

Chart.js es una manera de incluir gr谩ficos animados e interactivos de JavaScript basados en HTML5 en el sitio web de forma gratuita (enlace: aqu铆).

Para instarlo, en la consola se ejecuta: npm install chart.js react-chartjs-2


Continuando con el Proyecto: 馃敤


Vamos a VSC y en la ruta src/commons creamos el archivo Chart.js

Inicialmente se debe hacer el import de lo que acabamos de instalar, para ellos se toma en cuenta caracter铆sticas que vamos a manipular del chart como:

  • CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend

Para conocer mas elementos en el enlace (aqu铆) se encuentra la API de Chart.js

Para los tipos de gr谩ficos que queremos, podemos revisar la documentaci贸n en el enlace (aqu铆), para la clase se usa la etiqueta <Bar /> (enlace: aqu铆) y se definen algunas caracter铆sticas, en el enlace (aqu铆) se encuentra un ejemplo para chart de tipo Bar en forma vertical.

La estructura de Chart.js por el momento queda:

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

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

export const Chart = ({ charData}) => {
    return(
        <>
            <Bar
                data={charData}
                options={{
                    title: {
                        display: true,
                        text: 'Category',
                        fontSize: 20,
                    },
                    legend: {
                        display: true,
                        position: 'right',
                    },
                }}
            />
        </>
    );
};

Chart.js

import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from "chart.js";
import { Bar } from "react-chartjs-2";

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

export const Chart = ({ chartData }) => {
  return (
    <>
      <Bar
        data={chartData}
        options={{
          title: {
            display: true,
            text: "Category",
            fontSize: 20,
          },
          legend: {
            display: true,
            position: "right",
          }
        }}
      />
    </>
  )
}

Si est谩s en el 2023 ENERO, primero que todo Feliz A帽o, jaja segundo, debes realizar una actualizaci贸n con la estructuraci贸n de los options={} del <Bar>

const Chart = ({ chartData }: any) => {
    return (
        <>
            <Bar
                data={chartData}
                options={{
                    plugins: {
                        title: {
                            display: true,
                            text: 'Category',
                            font: {
                                size: 20,
                            },
                        },
                        legend: {
                            display: true,
                            position: 'right',
                        },
                    },
                }}
            />
        </>
    );
};

found 101 vulnerabilities (10 low, 33 moderate, 44 high, 14 critical)

Por si alguien lo esta trabajando con typescript en el 2023:

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

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

interface Dataset {
    data: (number | [number, number] | null)[];
    label: string;
    backgroundColor?: string;
    borderColor?: string;
    borderWidth?: number;
  }
  
  interface ChartData {
    labels: string[];
    datasets: Dataset[];
  }

export const Chart = ({ charData}: { charData: ChartData }) => {
    return(
        <>
            <Bar
                data={charData}
                 options={{
                    plugins: {
                        title: {
                        display: true,
                        text: 'Category',
                        font: {
                            size: 20,
                        },
                        },
                        legend: {
                        display: true,
                        position: 'right',
                        },
                    },
                    }}
            />
        </>
    );
};