Why do I get label displacement when I export a pie or line chart?
<p>I have been trying to figure out why this happens for quite a while. My page have three kinds of charts: bar, line and pie models. The pie and line gets labels displacement when I export it and the bar its just fine.</p>

<p>I think it has something to do with jqplot css. But still, it is quite frustrating.</p>

<p>My pie chart is in a dialog...
xhtml code:</p>

<pre><code>&lt;p:dialog id="expanded-mission-distribution-dialog" resizable="false"
    widgetVar="expanded-mission-distribution-dialog-var" modal="true"
    dynamic="true"&gt;
    &lt;p:panel id="expanded-mission-distribution-panel"
        styleClass="expanded-chart-panel "&gt;
        &lt;p:chart id="expanded-mission-distribution-chart" type="pie"
            styleClass="jqplot-target legend-spacing legend-size chart-dimension-3"
            widgetVar="expanded-mission-distribution-chart-var"
            model="#{fatigueDataSummaryAircraftAnalysisH.expandedMissionDistributionChart}" /&gt;
        &lt;p:commandButton id="mission-distribution-export-button"
            type="button" icon="ui-circle-export" styleClass="ui-command-button"
            title="Click to save the chart as image"
            onclick="exportChart('expanded-mission-distribution-chart-var')" /&gt;
    &lt;/p:panel&gt;
&lt;/p:dialog&gt;
</code></pre>

<p>The javascript that exports charts (I had to use a different approach compared to the one used in Primefaces' showcase, due compatibility purposes):</p>

<pre><code>function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset &lt; byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i &lt; slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

function exportChart(chart) {
// Exportando o gráfico como uma imagem.
var image = PF(chart).exportAsImage();

var fileName = "image.png";
var src = image.getAttribute('src');
var type = 'image/png';
var b64Data = src.split(',')[1];

var blob = b64toBlob(b64Data, type);
var link = document.createElement("a");

if (link.download !== undefined) { // feature detection
    // Browsers that support HTML5 download attribute
    link.setAttribute("href", window.URL.createObjectURL(blob));
    link.setAttribute("download", fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
} else {
    alert('Chart export only works in Chrome (v20+), Firefox (Gecko v13+), IE (v10+), Safari (v6+) and Opera (v12.10+).');
}
</code></pre>

<p>Image of chart in dialog:
<a href="http://i.stack.imgur.com/kGXUG.jpg" rel="nofollow">Pie chart inside my dialog</a></p>

<p>Image of exported chart:
<a href="http://i.stack.imgur.com/KRSAe.png" rel="nofollow">Exported pie chart</a></p>

<p>There is nothing similar over internet or whatsoever, what could be the reason of this issue?</p>