Highcharts does not export Unicode characters visible in HTML chart

Question

I ran into some mystery. I have a diagram that correctly displays the necessary Unicode characters on the web page itself (I think Spanish, but some English words as well). The DOM displays these characters correctly, and SVG includes them. Things are good. But, when I try to export these diagrams to our node.js export server provided using tall diagrams, I get the scary diamond "?" characters are everywhere. If I copy all this chart logic with my dependent HTML table, it will be read from outside our corporate application and exported (again, to our local node server), which displays correctly.

What would prevent a perfectly displayed chart from being exported with the correct character encoding?

A jsfiddle example with a sample of our data and how we create an HTML table.

The code we use for export (we do not use the built-in hamburger menu):

function chartExportSwitch(chartid, exportSelect, graphHeader, graphFooter, marginSize) { var type = 'image/jpeg'; switch ($(exportSelect).val()) { case 'JPEG': type = 'image/jpeg'; break; case 'PNG': type = 'image/png'; break; case 'SVG': type = 'image/svg+xml'; break; case 'PDF': type = 'application/pdf'; break; } chartExportLoc(chartid, type, graphHeader, graphFooter, marginSize); $(exportSelect).slideToggle('fast'); } function chartExportLoc(chartid, exportType, graphHeader, graphFooter, marginSize) { var chartToExport = $('#' + chartid).highcharts(); var sourceSpacingBottom = chartToExport.options.chart.spacingBottom; if (!marginSize) { marginSize = 15; //HighCharts default } chartToExport.exportChart( { type: exportType, scale: 1, filename: chartid }, { title: { text: graphHeader, margin: marginSize }, subtitle: { y: 10, text: graphFooter }, chart: { shadow: false, width: 800, spacingBottom: sourceSpacingBottom - 20 } }); return false; } 

My initial thought was that I could modify the elements upon export to do things like:

 if (chartToExport.xAxis[0].categories != undefined) { for (index = 0; index < chartToExport.xAxis[0].categories.length; ++index) { chartToExport.xAxis[0].categories[index] = unescape(encodeURI(chartToExport.xAxis[0].categories[index])); } } 

This seems to work, but of course, it also modifies the existing diagram on the page, which leads to some interesting text artifacts.

So, I tried to clone my highcharts object inside the export code, but it still only has links to deep elements instead of actually copying / cloning, because if I make the chartClone change mentioned above on my chartClone object it still changes the original schedule:

 var chartToExport = $('#' + chartid).highcharts(); var chartToExport = jQuery.extend(true, {}, $('#' + chartid).highcharts()); 

I also tried the following, but got an error on round objects:

 var chartClone = JSON.parse(JSON.stringify(chartToExport)); 

I also tried the Highcharts.merge () method:

 var origChart = $('#' + chartid).highcharts(); var chartToExport = Highcharts.merge(false, origChart); 

This causes the call to be exceeded So, the next question is how to deep copy the highcharts object?