Rendering Charts in PDFs

VB C#

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

Steps for Rendering Charts in PDFs

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.JavaScript();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
var pdf = renderer.RenderHtmlAsPdf(htmlWithJs);

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 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.

Click here to view the How-to Guide, including examples, sample code, and files >

View on GitHub

Code

https://github.com/iron-software/IronPdf.Examples/tree/main/examples/js-charts-to-pdf

Download ZIP