Rendering Charts in PDFs

VBC#

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");

Imports IronPdf

Const htmlWithJs As String = "<!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
Dim renderer = New ChromePdfRenderer()

' Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.JavaScript()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

Dim pdf = renderer.RenderHtmlAsPdf(htmlWithJs)

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

PM > Install-Package IronPdf

Install-Package IronPdf

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