how to export to image or pdf

[zhiga90]

google results just about jquery

[apertureless]

Hey @zhiga90

you can't export is as an image or pdf. There is no function for that in chart.js
You can however write a script that does that.

As Chart.js using a canvas to draw the charts, you could use toDataURL()

You can access the canvas in the chart component over this.$refs.canvas

[zhiga90]

On click at button i created a method
export2image: function() { console.log(this.$refs.canvas) }
but this.$refs.canvas is undefined

[apertureless]

@zhiga90 Where did you placed the button? In you Component, where you extend({}) the base chart?

[zhiga90]

parent

<line-chart :chartData="chartData" :options="options" ></line-chart>
import lineChart from './UI/LineChart'

        chartData: {labels, datasets},
        options: {
          maintainAspectRatio: false
        },

children lineChart

import { Line, mixins } from 'vue-chartjs'
export default Line.extend({
  mixins: [mixins.reactiveProp],
  props: {
    options: Object
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
})

[apertureless]

You have access to this.$refs.canvas in your children lineChart component.

import { Line, mixins } from 'vue-chartjs'
export default Line.extend({
  mixins: [mixins.reactiveProp],
  props: {
    options: Object
  },
  mounted () {
    console.log(this.$refs.canvas)
    this.renderChart(this.chartData, this.options)
  }
})

should work ;)

[zhiga90]

Thanks for the tip. I used used toDataURL().
example found in here

parent

<template>
...
                    <div @click="export2image" class="btn btn-default">
                      <i class="fa fa-download"></i>
                      <span class="hidden-xs hidden-sm ml5">{{t('Экспорт')}}</span>
                    </div>
...
                <line-chart :chartData="chartData" :options="options" ></line-chart>
...
</template>

<script>
  import lineChart from './UI/LineChart'
  export default {
    name: 'calc',
    components: {lineChart},
    data () {
      return {
        chartData: { labels: [], datasets: [] },
        options: {
          maintainAspectRatio: false
        }
      }
    },
    methods: {
      getCreateParams: function () {
        this.$http.get(this.$root.$data.apiUrl + 'calc.json', options2).then(function (response) {
          this.chartData = { labels: response.data.labels, response.data.datasets }
        }, function (error) {})
      },
      export2image: function () {
        let canvas = document.getElementById('line-chart').toDataURL('image/png')
        let link = document.createElement('a')
        link.download = 'image'
        link.href = canvas
        link.click()
      }
    },
    mounted: function () {
      this.getCreateParams()
    }
  }
</script>

<style scoped lang="sass" rel="stylesheet/sass">
</style>

children lineChart.js

import { Line, mixins } from 'vue-chartjs'
export default Line.extend({
  mixins: [mixins.reactiveProp],
  props: {
    options: Object
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
})