@react-pdf-levelup/charts

Componentes y utilidades para generar y renderizar gráficos (Chart.js) dentro de PDFs con @react-pdf/renderer. Utiliza chartjs-node-canvas en entornos Node/SSR y un fallback con Chart.js + canvas en navegador.

toda la documentacion de Chart.js https://www.chartjs.org/ es valida para utilizar en este paquete.

NOTA IMPORTANTE esta libreria es un complemento de @react-pdf-levelup/core

Instalación

npm install @react-pdf-levelup/chart

Componentes

ChartJS

Componente que renderiza un gráfico de Chart.js como imagen dentro de un documento PDF.

Props:

type ChartConfiguration = import("chart.js").ChartConfiguration
interface ChartJSProps {
  data: ChartConfiguration
  width?: number
  height?: number
  backgroundColor?: string
  devicePixelRatio?: number
  style?: any
}

Parámetros principales:

• data: configuración completa de Chart.js (ChartConfiguration).
• width, height: dimensiones del gráfico (px).
• backgroundColor: color de fondo del canvas.
• devicePixelRatio: escala de render para nitidez.
• style: estilos del contenedor (View).

Ejemplo básico

import { Layout, ChartJS } from "@react-pdf-levelup/charts"
import type { ChartConfiguration } from "chart.js"

const configuration: ChartConfiguration = {
  type: "bar",
  data: {
    labels: ["Enero", "Febrero", "Marzo", "Abril"],
    datasets: [
      { label: "Ventas", data: [50, 75, 40, 90],
        backgroundColor: ["#4CAF50","#2196F3","#FFC107","#F44336"] }
    ]
  },
  options: { plugins: { legend: { display: true } } }
}

const MyPdf = () => (
  <Layout>
    <ChartJS data={configuration} width={500} height={300} />
  </Layout>
)

Notas

• En Node/SSR se usa chartjs-node-canvas para generar imágenes base64 del gráfico.
• En navegador se utiliza Chart.js sobre un canvas para obtener el DataURL y se inserta con Image de @react-pdf/renderer.
• Este paquete es un complemento de @react-pdf-levelup/core.