Is it possible to print a chart with vue-chartjs? - vue.js

Question

I am using vue-chartjs to render graphs on a webapp. I know you can print charts if you are using the original library. However I have no idea on how to do it with the vue version of the library.
I have my charts variable on an external charts.js file
import {Bar, mixins } from 'vue-chartjs'
Chart.defaults.global
let chartOptions = Chart.defaults.global;
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
let that = this;
that.chartOptions = {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
fontFamily: "'Overpass_Mono', 'Monaco', monospace",
fontColor: "rgba(254, 255, 248, 0.5)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'rgb(168, 119, 181)',
zeroLineWidth: 2
},
}],
xAxes: [{
ticks: {
suggestedMin: 0,
fontColor: "rgb(168, 119, 181)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'transparent',
}
}],
},
legend: {
labels: {
fontColor: 'rgb(168, 119, 181)',
}
}
},
this.renderChart(this.chartData, that.chartOptions)
}
}
Then on my component template I have:
<template>
<div class="report">
<charts v-if="todaySelected"
:chart-id="'total_visits_chart_bar'"
:height="chartsHeight"
:options="chartOptions"
:chart-data="datacollection"
></charts>
<div v-if="todaySelected">
<button #click="printChart(charts)">Print chart</button>
</div>
</template>
<script>
import charts from './chart_0.js'
components: {
charts,
},
data() {
return{
datacollection: {"datasets":[{"label":"Entries Today","data":[15,15,15,0]},{"label":"Currently Inside","data":[2,2,2,0]}],"labels":[]}
}
}.
methods: {
printChart(charts) {
charts.print();
},
}
</script>
Any help would be appreciated.

Answer 1

The answer is: Yes, it is. Your print method in the components' script could be:
methods:{
printChart() {
var canvasEle = document.getElementById('total_visits_chart_bar');
var win = window.open('', 'Print', 'height=600,width=800');
win.document.write("<br><img src='" + canvasEle.toDataURL() + "' />");
setTimeout(function(){ //giving it 200 milliseconds time to load
win.document.close();
win.focus()
win.print();
win.location.reload()
}, 200);
},
}
You can also add this to your component's style:
#media print{
#page {
size: landscape
}
}

Answer 2

vue-chartjs is based on chart.js and not canvas.js, thus it does not have a "build-in" way of printing.
You have to do it with some custom logic and the native javascript printing functions.
You can however grab the canvas element inside your chart component and generate for example an image and then print that image.
It will get a bit tricky, because you only have access to the canvas inside your chart component. So you will need to maybe wait for an event or prop to trigger the toDataURL call and then emit the image to your parent component where you can print it. If you want to trigger the print in your parent component.
methods: {
print () {
// grab the canvas and generate an image
let image = this.$refs.canvas.toDataURL('image/png')
// Emits an event with the image
this.$emit('chart:print', image)
}
}
In your parent component:
<template>
<your-chart #chart:print="handlePrint"
<template/>
....
...
methods: {
handlePrint(image) {
const win = window.open('', 'Print', 'height=600, width=800')
win.document.write(`<br><img src='${image}' />`)
win.print()
win.close()
}
}

Answer 3

It seems like the library is based on chartjs not canvasjs https://www.chartjs.org/docs/latest/ you might want to look into how to print a window Quick Print HTML5 Canvas, and remember you have access to the canvas element where your graph is drawn:
methods: {
printChart() {
const canvasEle = this.$el.querySelector('canvas');
//now your chart image is on canvasEle
},
}

Answer 4

If you are not against using export to pdf format, you can implement this task using jsPDF library, for example:
<template>
<div class="report">
<charts v-if="todaySelected"
:chart-id="'total_visits_chart_bar'"
:height="chartsHeight"
:options="chartOptions"
:chart-data="datacollection"
></charts>
</div>
</template>
<script>
import jsPDF from 'jspdf'; //for PDF printing
methods: {
pdfThatThing : function(){
//Default export is a4 paper, portrait, using milimeters for units
let pdfName = 'test';
var doc = new jsPDF();
doc.text("Header", 20, 20); //at x,y at def.units 2cm
//chart element
let canvasEle = document.getElementById('total_visits_chart_bar');
let chartURL = canvasEle.toDataURL(); //transform path
//a4 page is 209mm, adds at 4cm top, 2cm left, for 15cm in size
doc.addImage(chartURL, 'PNG', 20, 40, 150, 150 )
doc.save(pdfName + '.pdf');
},
}
</script>
There is also option to auto show print dialog in pdf viewer:
doc.autoPrint({variant: 'non-conform'})