0

While trying IronPdf library to convert HTML with Charts, I was not getting the charts into the PDF file. PDF gets generated without the bar charts. Here is the sample link I was trying to convert to PDF - https://www.chartjs.org/samples/latest/charts/bar/horizontal.html

Code used:

var Renderer = new IronPdf.HtmlToPdf();
Renderer.PrintOptions.EnableJavaScript = true;
Renderer.PrintOptions.RenderDelay = 500;
Renderer.PrintOptions.CssMediaType = PdfPrintOptions.PdfCssMediaType.Print;
var PDF = Renderer.RenderUrlAsPdf("https://www.chartjs.org/samples/latest/charts/bar/horizontal.html");
var path = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Desktop), "horizontal.pdf");
PDF.SaveAs(path);
gmsi
  • 1,062
  • 1
  • 16
  • 29
  • 1
    I had similar problems with a different HTML to PDF package and the problem was that the graph was being rendered asynchronously after the HTML was loaded. The package I used had a way to 'wait' until doing the conversion. – Neil May 07 '20 at 11:23
  • I contacted IronPdf about same issue. Got reply that chartjs was not compatible and I should be using c3 d3 library, specifically version 3 of d3 and 0.5.4 version of c3 (does not work with latest), or highcharts. Did you somehow manage to get chartjs work for you? – alex-tech May 27 '20 at 01:18
  • high-charts support added September 2019 to ironPDF. It was not supported previously, and is still not supported by most other HTML to PDF libraries including Wkhtmltopdf / itext – Stephanie Oct 21 '21 at 02:28

2 Answers2

0

I was facing similar issue with HighCharts. I added c3 and d3 scripts file (JS and CSS) which solved my issue.

Please add the code below to your code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css" rel="stylesheet">
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js"></script>

Let me know if it works for you or not.

funie200
  • 3,688
  • 5
  • 21
  • 34
Amit Gobare
  • 1
0

I have found that since 2021.9.3737 the main IronPDf package renders JS charts well for me and my team. I use the latest nuget https://www.nuget.org/packages/IronPdf/

using IronPdf; 
 
var Renderer = new IronPdf.ChromePdfRenderer();
 
Renderer.RenderingOptions.EnableJavaScript = true;
Renderer.RenderingOptions.RenderDelay = 500;

var PDF = Renderer.RenderUrlAsPdf("https://www.chartjs.org/samples/latest/charts/bar/horizontal.html");

var path = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Desktop), "horizontal.pdf");

PDF.SaveAs(path);
Stephanie
  • 600
  • 13
  • 24
  • To understand. IronPDF used to have limited javascript support - as most html to pdf renderers do. As of 2021.9 release they are using full latest Chrome browser embedded in their software for HTML to PDF rendering. Finally JS and CSS support is same as on desktop browsers. I found this tutorial they posted recently extremely helpful to get my HTML, CSS and JS pixel perfect. https://ironpdf.com/tutorials/pixel-perfect-html-to-pdf/ Talking to their support channel, WebGL support is coming in October 2021 as well, which will allow for 3d chart rendering. – Stephanie Oct 05 '21 at 02:52