CODEWITHSUNDEEP
javascriptvue.jssvgchart.js
Bulchsu
Bulchsu

Reputation: 700

How to export chart.js graph to svg in vue?

I have a graph in my application, which was created with Chart.js library. My graph.js file looks like this:

import { Line, mixins } from 'vue-chartjs';

const { reactiveProp } = mixins;

export default {
  extends: Line,
  mixins: [reactiveProp],
  data() {
    return {
      options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          display: true,
          position: 'bottom',
        },
        scales: {
          yAxes: [
            {
              ticks: {
                suggestedMin: 0,
                callback(tick) {
                  return `${tick}%`;
                },
              },
            },
          ],
        },
        tooltips: {
          callbacks: {
            label(tooltipItem, data) {
              const dataset = data.datasets[tooltipItem.datasetIndex];
              const currentValue = dataset.data[tooltipItem.index];
              return ` ${dataset.label}: ${currentValue}%`;
            },
          },
        },
      },
    };
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
};

And the component responsible for rendering it (i've cut some irreleveant details):

<template>
  <div
    class="container">
    <b>
      ...
    </b>
    <div
      class="graph">
      <graph
        :styles="graphStyle"
        :chart-data=graphData">
      </graph>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Graph from './graph';
import {
  ...
} from '../../constants';

export default {
  name: '...',
  components: {
    Graph,
  },
  data() {
    return {
      ...
    };
  },
  watch: {
    ...
  },
  methods: {
    ...
  },
  computed: {
    ...
  },
};
</script>

I would like to export it to svg, and then post it to my api. I need to serialize it into a string and then send with post method, in json body. Do i have to use some another external library? How can i serialize it to svg? Thanks for any answers.

Upvotes: 0

Views: 1436

Answers (1)

Lyubomir Vasilev
Lyubomir Vasilev

Reputation: 3030

If png is acceptable for you, there might be a way to do it. Keep in mind that I haven't tested this, but it should work by the looks of it.

Looking at the documentation of vue-chartjs, here it says that you can access the chartjs object with:

this.$data._chart

From there, you should be able to use its method for saving the chart as a png - toBase64Image():

this.$data._chart.toBase64Image()

Upvotes: 1

Related Questions