I want include Chart in CV

[malyalayoganath]

I want to include a Chart in the react pdf. I am unable to do it.
I am using the libraries Chartjs , Tailwindcss, and React PDF. Can you please me

[joehunterdev]

Option 1 — Render Chart → Convert to Image → Embed in React PDF

This is the most reliable way to embed a chart into a PDF when using @react-pdf/renderer.

Since React PDF cannot render or DOM elements directly, you:

Render the chart normally in the browser

Convert the chart to a Base64 image

Pass that image into React PDF’s component

Step 1 — Render Your Chart

Example using Chart.js:

import { Line } from 'react-chartjs-2';
import { useRef } from 'react';

function MyChart({ data, options }) {
const chartRef = useRef();

return (

);
}

Step 2 — Convert Chart to Base64 Image
const chartImage = chartRef.current.toBase64Image();

You now have a Base64 PNG string like:

data:image/png;base64,iVBORw0KGgoAAAANS...

Store it in state if needed:

const [chartImage, setChartImage] = useState(null);

const generateImage = () => {
const image = chartRef.current.toBase64Image();
setChartImage(image);
};

Step 3 — Embed Image into React PDF
import { Document, Page, Image } from '@react-pdf/renderer';

const MyPDF = ({ chartImage }) => (


{chartImage && (
<Image
src={chartImage}
style={{ width: 500, height: 300 }}
/>
)}


);

Optional — Full Flow Example

Generate PDF

{chartImage && (
<PDFDownloadLink
document={}
fileName="report.pdf"

Download PDF

)}

Why This Works

Charts render in the browser as normal

You capture the rendered canvas as an image

React PDF only needs to render an image (which it supports)

Works with any canvas-based library (Chart.js, CanvasJS, etc.)

Key Limitation

You cannot directly render canvas or DOM-based charts inside React PDF — only static assets like images or SVG paths.

If you'd like, I can also provide:

An SVG-based version

A TypeScript example

A reusable hook (useChartToPdfImage)

Or a production-ready pattern for large dashboards