Rendering Charts in PDFs

from ironpdf import *

htmlWithJs = """
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>C3 Bar Chart</title>
    </head>
    <body>
        <div id='chart' style='width: 950px;'></div>
        <script src='https://d3js.org/d3.v4.js'></script>
        <!-- Load c3.css -->
        <link href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css' rel='stylesheet'>
        <!-- Load d3.js and c3.js -->
        <script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js'></script>
        <script>
            Function.prototype.bind = Function.prototype.bind || function (thisp) {
                var fn = this;
                return function() {
                    return fn.apply(thisp, arguments);
                };
            };
            var chart = c3.generate({
            bindto: '#chart',
            data: {
                columns: [
                    ['data1', 30, 200, 100, 400, 150, 250],
                    ['data2', 50, 20, 10, 40, 15, 25]
                ]
            }
            });
        </script>
    </body>
</html>
"""

# Instantiate Renderer
renderer = ChromePdfRenderer()

# Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.RenderDelay(1000)
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

pdf = renderer.RenderHtmlAsPdf(htmlWithJs)

# Export to a file or Stream
pdf.SaveAs("js-chart.pdf")

pip install ironpdf

pip install ironpdf

Rendering Charts in PDFs

IronPDF for Python can render interactive JavaScript chart libraries - such as D3.js and C3.js - directly to PDF, producing high-quality chart images without any additional image conversion step.

Getting Started

Build your chart in a self-contained HTML string that includes the necessary CDN script tags. Set EnableJavaScript = True and add a generous WaitFor.RenderDelay to ensure the chart library has finished drawing before the PDF is captured. Optionally set CssMediaType to Print to apply print-specific styles.

Understanding the Code

EnableJavaScript: Required to execute the D3 and C3 scripts that generate the chart.
WaitFor.RenderDelay(1000): Waits 1000 milliseconds after page load. Chart libraries perform asynchronous rendering, so a longer delay is needed compared to simple DOM manipulation.
CssMediaType = PdfCssMediaType.Print: Activates @media print CSS rules, which typically removes interactive controls and produces a cleaner chart layout in the PDF.
RenderHtmlAsPdf(htmlWithJs): Renders the complete HTML - including the rendered chart - as a PDF document.

Supported Chart Libraries

Because IronPDF uses the Chrome rendering engine, any JavaScript chart library that runs in a browser will also render correctly to PDF. This includes Chart.js, Highcharts, ApexCharts, ECharts, and others.

Learn to convert HTML to PDF with IronPDF for Python!