Rendering Charts and Graphs in PDFs

import com.ironsoftware.ironpdf.PdfDocument;
import com.ironsoftware.ironpdf.render.ChromePdfRenderOptions;
import com.ironsoftware.ironpdf.render.CssMediaType;
import java.io.IOException;
import java.nio.file.Paths;

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

ChromePdfRenderOptions renderingOptions = new ChromePdfRenderOptions();
renderingOptions.setEnableJavaScript(true);
renderingOptions.setRenderDelay(1000);
renderingOptions.setCssMediaType(CssMediaType.PRINT);

PdfDocument pdf = PdfDocument.renderHtmlAsPdf(htmlWithJs, renderingOptions);

// Save the PDF
try {
    pdf.saveAs(Paths.get("assets/js_chart.pdf"));
} catch(IOException exception) {
    exception.printStackTrace();
}

Imports Microsoft.VisualBasic

import com.ironsoftware.ironpdf.PdfDocument
import com.ironsoftware.ironpdf.render.ChromePdfRenderOptions
import com.ironsoftware.ironpdf.render.CssMediaType
import java.io.IOException
import java.nio.file.Paths

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

Dim renderingOptions As New ChromePdfRenderOptions()
renderingOptions.setEnableJavaScript(True)
renderingOptions.setRenderDelay(1000)
renderingOptions.setCssMediaType(CssMediaType.PRINT)

Dim pdf As PdfDocument = PdfDocument.renderHtmlAsPdf(htmlWithJs, renderingOptions)

' Save the PDF
Try
	pdf.saveAs(Paths.get("assets/js_chart.pdf"))
Catch exception As IOException
	exception.printStackTrace()
End Try

Rendering Charts and Graphs in PDFs

IronPDF can render web pages containing charts, graphs, and other elements built with modern JavaScript technologies.

IronPDF supports WebGL, allowing it to process web canvas-built elements using the machine's hardware graphics capabilities.

IronPDF supports all third-party chart libraries, including:

C3.js
D3.js
Highcharts

The setEnableJavaScript method on the ChromePdfRenderOptions object enables the developer to enable the processing of JavaScript referenced internally or externally within a web page. This property will need to be set to true to allow IronPDF to process the JavaScript needed to render the charts and graphics on a webpage.

The setRenderDelay configures IronPDF to postpone its interpreting of a web page's JavaScript for a specified amount of time (in milliseconds) after it has loaded its DOM. This method is useful in ensuring that IronPDF's HTML-to-PDF converter captures content that appears on a web page seconds after a browser finishes loading it initially. This is particularly relevant for asynchronous JavaScript code that takes a long-time to complete.

Refer to the rendering options code example for more details about additional methods available on the ChromePdfRenderOptions class.