[Chartjs]-Printing Chart using ngPrint and tc-chartjs

by

2👍

The most obvious solution would be to:

  • Assign an ID to the canvas object containing the data chart
  • Through JS (or jQuery), recover the object by ID and access the 2d context through getContext(‘2d’)
  • Call context.toDataUrl providing the info the function needs (you can lookup the docs)
  • Save the image url generated and assign it to another html object that acts as a container for that very specific image.
  • Make that object printable and bam you can print it

Some may consider this solution tedious, to say the least. I hope that someone with more knownledge can come up with something more elegant.

Code related (plain JS):

let canvas = document.getElementById('your-canvas'); // Grab canvas from DOM
let ctx = canvas.getContext('2d'); // Grab 2D context from canvas
let image = ctx.toDataUrl(); // You can look-up some decorations for this
let newImage = document.createElement('img'); // Create a new image element
newImage.src = image;
// You can customize the size and the styles of the image to print here
document.appendChild(newImage); // Append the new image to the DOM to print it later. Through CSS styles, you can also force the browser to print only that specific image. As usual, read the docs

Leave a comment