How to Add Chart To PDF
Charts and graphs turn raw numbers into visual stories in your PDF reports, invoices, and dashboards. Whether you need bar charts for sales data, line charts for trends, or pie charts for market share, embedding them in PDFs ensures they look consistent in print and on screen. SublimePDF renders charts from HTML/CSS/JavaScript in your template, supporting Chart.js, SVG-based libraries, or pre-rendered chart images.
Follow the step-by-step instructions below, then use the free tool directly — no registration or download required.
Open Tool →How to Add Chart To PDF — Step by Step
Choose your charting approach
Three options: 1) Include Chart.js or another JS charting library in your HTML template, 2) Generate charts server-side and pass image URLs in your data, or 3) Use inline SVG charts built with D3.js or raw SVG markup.
Embed Chart.js in your template
Add a <canvas> element and the Chart.js CDN script to your HTML template. Initialize the chart with your data in a <script> block: new Chart(ctx, { type: 'bar', data: {{ chartData }} }). SublimePDF executes JavaScript during rendering.
Wait for charts to render
Set 'waitForSelector': 'canvas.rendered' or 'waitForTimeout': 2000 in your API options to ensure charts finish rendering before the PDF is captured. Without this, fast captures may produce blank canvases.
Use pre-rendered chart images
For faster PDF generation, render charts server-side using QuickChart.io or Matplotlib and pass the resulting image URLs in your JSON data: <img src='{{ revenueChartUrl }}' width='600'>. This skips client-side JavaScript execution entirely.
Style charts for print
Ensure chart backgrounds are white (not transparent), use dark-on-light color schemes for readability, set font sizes to at least 10px for legibility in print, and add explicit width/height attributes to prevent charts from resizing unpredictably.
Pro Tips
- 💡 Pre-rendered chart images (PNG/SVG) produce faster and more reliable PDFs than client-side JavaScript charts. Use QuickChart.io's API for server-side Chart.js rendering without any runtime dependency.
- 💡 If using Chart.js in-template, disable animations (animation: false) to prevent the PDF from capturing a mid-animation frame.
- 💡 Set deviceScaleFactor: 2 in your PDF options to render charts at 2x resolution (Retina quality) for crisp printing.
- 💡 For SVG charts (D3.js, raw SVG), the chart renders at infinite resolution and prints perfectly at any size — prefer SVG over canvas when print quality matters.
Privacy & Security
All processing happens directly in your browser. Your files are never uploaded to any server — they remain on your device throughout the entire process. SublimePDF uses WebAssembly technology for fast, secure, client-side processing.
Works Everywhere
This tool works on any modern browser — Chrome, Firefox, Safari, or Edge — on desktop, tablet, or mobile. No software to install. PDF is an open ISO standard supported by all major platforms.
How to Add Chart To PDF — FAQ
Can I use Chart.js or D3.js in my PDF template?
Why is my chart blank in the PDF?
What's better for PDF charts: Canvas or SVG?
Can I pass chart data dynamically through the API?
Related Guides
How to Add Page Numbers to PDF
Adding page numbers to a PDF makes documents easier to navigate and reference. Whether it's a report, manuscript, or legal document, SublimePDF lets you add customizable page numbers in seconds.
How to Add Watermark to PDF
Watermarks help protect intellectual property, mark document status (DRAFT, CONFIDENTIAL), or brand your PDFs. SublimePDF lets you add customizable text or image watermarks to any PDF.
How to Add Header Footer To PDF
Headers and footers in PDFs add professional touches like page numbers, document titles, dates, and company branding. Whether you're preparing a report, thesis, or legal filing, consistent headers and footers make multi-page documents easier to navigate and reference. SublimePDF lets you add customizable headers and footers without Adobe Acrobat.