\n \n \n \n \n \n \n \";\n\n// Instantiate Renderer\nvar renderer = new ChromePdfRenderer();\n\n// Enable JavaScript in our RenderingOptions\nrenderer.RenderingOptions.EnableJavaScript = true;\nrenderer.RenderingOptions.WaitFor.JavaScript();\nrenderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;\n\nvar pdf = renderer.RenderHtmlAsPdf(htmlWithJs);\n\n// Export to a file or Stream\npdf.SaveAs(\"js-chart.pdf\");\n","about":{"@id":"https://ironpdf.com/examples/js-charts-to-pdf/#product"},"targetProduct":{"@id":"https://ironpdf.com/examples/js-charts-to-pdf/#product"},"keywords":"JavaScript charts to PDF,IronPDF chart rendering,convert JS charts to PDF,render charts in PDF using IronPDF,create PDF with JavaScript charts,embed interactive charts in PDF","datePublished":"2023-06-06","dateModified":"2026-04-22"}]}
Rendering Charts in PDFs
using IronPdf;

const string 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]
                    ]
                }
                });
            // Set delay
            setTimeout(function() {
                window.ironpdf.notifyRender();
            }, 1000);
            </script>
        </body>
    </html>";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.JavaScript();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

var pdf = renderer.RenderHtmlAsPdf(htmlWithJs);

// Export to a file or Stream
pdf.SaveAs("js-chart.pdf");
NuGet Download
PM > Install-Package IronPdf
Rendering Charts in PDFs

Rendering Charts in PDFs

Along with powerful HTML-to-PDF conversion capabilities, IronPDF provides full support for JavaScript rendering - which includes support for canvas and chart rendering. This full support for JavaScript enables developers to create high-quality PDFs with fully rendered charts, including 3D charts and polygons.

Some supported charts include:

  • C3.js
  • D3.js
  • Highcharts

To start with, we first need to create the HTML content that will be used to create our PDF document. This HTML includes inline JavaScript to generate a bar chart using the C3 library. The setTimeout function ensures that after 1 second, window.ironpdf.notifyRender() is called, signaling IronPDF to proceed with rendering the page once the JavaScript has completed execution.

Now, we can look at how this is rendered into an easy-to-read PDF document. First, we create a new ChromePdfRenderer instance, which is used to access the powerful rendering engine IronPDF uses and allows for advanced JavaScript to be rendered in the HTML page.

Next, we have three different options that are set using the RenderingOptions class. The first, EnableJavaScript = true, ensures that the JavaScript within our example HTML document is executed when rendering the HTML page. WaitFor.JavaScript() is used to pause the rendering process until all JavaScript has run, ensuring the chart is properly rendered. The third option, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, sets the CSS media type to print, optimizing styles for PDF rendering.

The next step is to finally render the HTML document we created earlier into a PDF file. This is done through the RenderHtmlAsPdf method, which takes the htmlWithJs variable and turns the HTML and JavaScript into a new PDF document.

Finally, the PDF document can be saved using the SaveAs method. Now, you will have a new PDF document with a fully rendered chart created using HTML and JavaScript.

Discover How to Convert JavaScript to PDF with IronPDF.
View on GitHub

Ready to Get Started?

Nuget Downloads 21,916,531Version:2026.11just released

Free NuGet Download
Total downloads: 21,916,531