jb3_2
Posts: 48
Joined: Wed Sep 20, 2017 12:05 pm

How to get chart's base64 PNG data to be used in jsPDF?

Hi,

As a very happy Highcharts user I need to create pdf files that include Highcharts plus Text client-side. To use images in jsPDF, I need the base64 encoded PNG data of the chart. I have looked at the api as well as the source code of the modules exporting.js and offline-exporting.js (where a lot of cross-browser magic happens, if I understand correctly), but did not find a way to get the required base64-encoded png image data.

I also tried using the canvg library, but I have the impression I'm duplicating your efforts with worse results.

Can you help me get to the required image data? For me the ideal solution would use the current chart's svg (as the user sees it, possibly manipulated / zoomed) and convert either using export.highcharts.com or offline in the browser. If this is not possible, getting the unmanipulated chart would also work for the moment. It should also work cross-browser (IE 11+).

Thanks in advance!
J.
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: How to get chart's base64 PNG data to be used in jsPDF?

hi jb3_2,

We are glad that you are using our Highcharts library and that means a lot to us.
Sure, you could get expected data type, but I recommend you to use 3rd-party extension for SVGElement which is called SVG.toDataURL, because this solution works on wide range of browsers versions in compare to native solutions. Here is the link to GitHub repo of that project: https://github.com/sampumon/SVG.toDataURL

I also prepared a live example, where I used that library to show you how it works.
In that example I had to paste that code directly into the html file, but don't worry about it, you just need to download the script file from their repository and link it in your project.
I created a button, which gives you possibility to generate base64 string, and display it in the console window. Please take a look on example below:

Code: Select all

var button = document.getElementById('base64-button')
button.onclick = function() {

    // Get Actual SVG of a chart
    let svgString = chart.getSVG();

    // Use DOMParser to parse new svg element from svgString
    let parser = new DOMParser(); 
    let svgElem = parser.parseFromString(svgString, "image/svg+xml").documentElement;

    // Use toDataURL extension to generate Base64 string
    let b64 = svgElem.toDataURL()

    // Log string in console
    console.log(b64)
}
I think that code attached above is clear and undestandable to you, but if you would like to know something more, just ask.
Still enjoy the Highcharts :)

Live working: https://jsfiddle.net/5kc67rds/

Best regards!
Daniel Studencki,
Highcharts Developer
jb3_2
Posts: 48
Joined: Wed Sep 20, 2017 12:05 pm

Re: How to get chart's base64 PNG data to be used in jsPDF?

Thank you! Your help improves my life.
J.
don
Posts: 102
Joined: Tue Nov 29, 2011 9:46 pm

Re: How to get chart's base64 PNG data to be used in jsPDF?

Thanks! It saves me a lot of time.
Dronax
Posts: 13
Joined: Sat Jan 16, 2021 10:39 pm

Re: How to get chart's base64 PNG data to be used in jsPDF?

any working example for those who use your Highcharts-Angular solution please ?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to get chart's base64 PNG data to be used in jsPDF?

Hi Dronax!

What solution are you looking for, please write me exactly what is going on and what you need, I will try to help.
Maybe this option has been added by this time but I need concrete information.

Best regards.
Sebastian Hajdus
Highcharts Developer
kavya
Posts: 1
Joined: Sun Feb 14, 2021 11:00 am

Re: How to get chart's base64 PNG data to be used in jsPDF?

Hi,

I have been trying to get chart as a base64 png with the above code you have given but its working fine in all the browsers except in IE 11. in IE 11 its giving me 'Unhandled promise rejection ERROR! Unable to load image (image.onerror) data:image/svg+xml;base64'. I couldn't understand where its going wrong. can you please help me in resolving this.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to get chart's base64 PNG data to be used in jsPDF?

Hi kavya!

Have you check this topic, I think it's a more general problem with ie11 and the way how it works with base64.
https://stackoverflow.com/questions/544 ... ng-in-ie11.

Let me know if it helps you.
Best regards.
Sebastian Hajdus
Highcharts Developer
FCAROCA
Posts: 1
Joined: Thu Sep 22, 2022 8:02 pm

Re: How to get chart's base64 PNG data to be used in jsPDF?

how can you create a pdf file with the Dompdf library and highcharts graphics?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How to get chart's base64 PNG data to be used in jsPDF?

Hello FCAROCA!
Welcome to our forum and thanks for contacting us with your question!

To export Highcharts charts to PDF you should use our Export Module: https://www.highcharts.com/docs/export- ... e-overview
To enable exporting, the module needs to be included. When enabled, a context button with a menu appears in the top right corner of the chart and you can choose the PDF option :)

Let me know if you have any further questions!
Regards!
Hubert Kozik
Highcharts Developer
Mille
Posts: 29
Joined: Wed Jan 23, 2019 7:28 pm

Re: How to get chart's base64 PNG data to be used in jsPDF?

A couple of years, how would one do this natively with Highcharts and a modern browser?
daniel_s wrote: Tue Dec 19, 2017 1:01 pm

Code: Select all

var button = document.getElementById('base64-button')
button.onclick = function() {

    // Get Actual SVG of a chart
    let svgString = chart.getSVG();

    // Use DOMParser to parse new svg element from svgString
    let parser = new DOMParser(); 
    let svgElem = parser.parseFromString(svgString, "image/svg+xml").documentElement;

    // Use toDataURL extension to generate Base64 string
    let b64 = svgElem.toDataURL()

    // Log string in console
    console.log(b64)
}
Live working: https://jsfiddle.net/5kc67rds/

Best regards!
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: How to get chart's base64 PNG data to be used in jsPDF?

Hi!

The method for obtaining a base64 data hasn't changed much throughout the years. If you're not planning to support older browsers (like IE11 for example) than you don't have to include SVG.toDataURL library, but I would still reccomend doing it because it covers many edge cases.

Live demo (with native conversion): https://jsfiddle.net/BlackLabel/ukgL0q9b/

References:
https://api.highcharts.com/class-refere ... art#getSVG
https://developer.mozilla.org/en-US/doc ... ary/Base64

Let me know if you have any further questions!
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”