Print pie chart in chartjs

Question

I am having a problem with chartjs. I just want to print what is inside div#browser with a pie chart. The chart was fine and animated but the problem is during I print it the pie chart disappears but when I refresh again it it was just fine. The other charts works fine in printing except the pie chart. I believe its reason is in the animation or something

The chartjs script

<script>
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
      var pieChart = new Chart(pieChartCanvas);
      var PieData = [
        {
          value: 700,
          color: "#f56954",
          highlight: "

        #f56954",
              label: "Chrome"
            },
            {
              value: 500,
              color: "#00a65a",
              highlight: "#00a65a",
              label: "IE"
            },
            {
              value: 400,
              color: "#f39c12",
              highlight: "#f39c12",
              label: "FireFox"
            },
            {
              value: 600,
              color: "#00c0ef",
              highlight: "#00c0ef",
              label: "Safari"
            },
            {
              value: 300,
              color: "#3c8dbc",
              highlight: "#3c8dbc",
              label: "Opera"
            },
            {
              value: 100,
              color: "#d2d6de",
              highlight: "#d2d6de",
              label: "Navigator"
            }
          ];
          var pieOptions = {
            //Boolean - Whether we should show a stroke on each segment
            segmentShowStroke: true,
            //String - The colour of each segment stroke
            segmentStrokeColor: "#fff",
            //Number - The width of each segment stroke
            segmentStrokeWidth: 1,
            //Number - The percentage of the chart that we cut out of the middle
            percentageInnerCutout: 50, // This is 0 for Pie charts
            //Number - Amount of animation steps
            animationSteps: 100,
            //String - Animation easing effect
            animationEasing: "easeOutBounce",
            //Boolean - Whether we animate the rotation of the Doughnut
            animateRotate: true,
            //Boolean - Whether we animate scaling the Doughnut from the centre
            animateScale: false,
            //Boolean - whether to make the chart responsive to window resizing
            responsive: true,
            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: false,
            //String - A legend template
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
            //String - A tooltip template
            tooltipTemplate: "<%=value %> <%=label%> users"
          };
          //Create pie or douhnut chart
          // You can switch between pie and douhnut using the method below.
          pieChart.Doughnut(PieData, pieOptions);
    </script>

The html

<div id="browser">
 <h3 class="box-title">Browser Usage</h3>
   <a onclick="printContent('browser')">Print</a>
   <div class="chart-responsive">
     <canvas id="pieChart" height="150"></canvas>
   </div>
</div>

Print script

<script>
function printContent(el){
  var restorepage = document.body.innerHTML;
  var printcontent = document.getElementById(el).innerHTML;
  document.body.innerHTML = printcontent;
  window.print();
  document.body.innerHTML = restorepage;
}
</script>

Answer 1

Try using the .toDataURL() method on your canvas. This method returns a URL containing your chart as an image. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

• Grab your pie chart's canvas and convert it to an image: document.getElementbyId('pieChart').toDataURL;

• Assign the generated chart image URL to a variable, let's keep using printContents in this case: let **printContents** = document.getElementbyId('pieChart').toDataURL;

• Initiate an html document on the fly and append the previously created image URL as an <img> element's source, using template literals to embed the printContents variable: let html = <html><head><title></title></head><body><img src=${printContent}></body></html> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

-Execute the print job (Chrome) by writing the previously constructed html doc to the print window on the fly:

let **printWindow** = window.open('', 'Print-Preview', 'height=900,width=200'); 

printWindow.document.open();

printwindow.document.write(html);

printWindow.document.close();