title: Highcharts Not Exporting Unicode Characters Visible On HTML Chart
body: <p>I am faced with a bit of a conundrum. I have a chart that renders correctly on the web page itself with desired unicode accent characters (think Spanish, but some English words as well). The DOM shows these characters correctly and the SVG includes them. All is good. But, when I attempt to export these charts to our node.js-based export server provided by highcharts I get the dreaded diamond "?" symbols all over the place. If I copy this entire chart logic with its dependent HTML table it reads from outside our enterprise application and export (again, to our local node server) it renders correctly.</p>
  
  <p><strong>What would prevent a perfectly rendered chart from being exported with the correct character encoding?</strong></p>
  
  <p>Example <a href="http://jsfiddle.net/19r78taw/" rel="noreferrer">jsfiddle</a> with sample of our data and how we create from HTML table.</p>
  
  <p>Code we use to export (we do not use the built-in hamburger menu):</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>My initial thought was that I could modify the items upon export to do stuff like:</p>
  
  <pre><code>if (chartToExport.xAxis[0].categories != undefined) {
      for (index = 0; index &lt; chartToExport.xAxis[0].categories.length; ++index) {
          chartToExport.xAxis[0].categories[index] = unescape(encodeURI(chartToExport.xAxis[0].categories[index]));
      }
  }
  </code></pre>
  
  <p>This seems to work but, of course, it modifies the existing chart on the page as well - which results in some interesting text artifacts.</p>
  
  <p>So, I attempted to clone my highcharts object within the export code but this still only appears to have references to deep items instead of actually copying/cloning because if I make the <code>categories</code> change mentioned above on my <code>chartClone</code> object it still modifies the original chart:</p>
  
  <pre><code>var chartToExport = $('#' + chartid).highcharts();
  var chartToExport = jQuery.extend(true, {}, $('#' + chartid).highcharts());
  </code></pre>
  
  <p>I have also tried the following but got error on circular objects:</p>
  
  <pre><code>var chartClone = JSON.parse(JSON.stringify(chartToExport));
  </code></pre>
  
  <p>I also tried the Highcharts.merge() method:</p>
  
  <pre><code>var origChart = $('#' + chartid).highcharts();
  var chartToExport = Highcharts.merge(false, origChart);
  </code></pre>
  
  <p>This results in exceeding the callstack
  <strong>So, a follow-up question would be how to deep copy a highcharts object?</strong></p>