Vfrdtyky

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.

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()

 }

}

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 

     },

  }

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

        }

}