Export charts created by vue-chartjs to PDF files

Overview

vue-chartjs-exporter

Export charts created by vue-chartjs to PDF files. Demo here.

Read the Requirements section below before proceeding, because it contains important information that will have you off looking for an easier solution 😑 . Look into Quickchart.io for an easier but not necessarily free solution.

Installation

npm i vue-chartjs-exporter

Usage

Import vue-chartjs-exporter:

import Exporter from "vue-chartjs-exporter";

Get the charts to be exported:

let bar = document.getElementById("bar");
let radar = document.getElementById("radar");
let pie = document.getElementById("pie");
let area = document.getElementById("area");
let line = document.getElementById("line");

Create a new instance of Exporter:

const exp = new Exporter([line, bar, radar, pie, area]);
exp.export_pdf().then((pdf) => pdf.save("charts.pdf")); // returns a jsPDF doc object which you can do whatever you wish with.

Requirements

Apparently, (locally) converting charts from chart.js is actually not that easy, and converting charts from vue-chartjs is even more difficult. For an approach to render charts without an external API, that can run offline and locally, it's significantly more complicated, because you have to specifically place the chart in a container of 594px by 459px (for letter size paper), and make sure that the chart's options are set to

{ responsive: true, maintainAspectRatio: false }

...or the image will either be stretched or squashed or too small or too large, like this:

failure 1 failure 2 failure 3 failure 4

You can't create two charts, one formatted the way you like, and the other formatted for conversion, and hide them with v-show or v-if, unfortunately, as far as I can tell (if you find a way though, do let me know). However, you can place the conversion-formatted ones off-screen so they're not visible directly, but are still there.

If you do all this, though, you can end up with some rather nice looking chart PDFs:

success 1 success 2

Now, do note that, as aforementioned, the chart element you pass into Exporter will have to be contained within an element of 594px by 459px, since that's the paper's size, and thus the optimum size for the chart. But then you won't be able to resize the chart on your website or such, so what you can do is create two identical charts, one which you can do whatever you want with, and another, contained in a div of the right size, but placed off screen, so the user doesn't see it.

Something like this:

">
<template>
    <BarChart />
    <div class="hidden">
        <BarChart id="bar" />
    div>
template>

<script>
    export default { MAGIC GOES HERE }
script>

<style>
    .hidden {
      width: 594px !important;
      height: 459px !important;
      position: absolute !important;
      left: -600px !important;
    }
style>

example1

The other chart is hidden off to the left where you can't see it.

Both charts would be populated with the same data, but when you export to PDF, the off-screen chart would be converted to a PDF, not the one that the user would see. This is overly complicated, but it's the only way I could find. If you try to hide charts with v-if or v-show, when you show the hidden chart, the other one will be deleted for some reason. Perhaps you could create a single component that would create the two charts together, to make things easier, but that would require further work.

Also note that you might have to increase the distance the hidden chart is moved left if it is still showing on screen.

Developed for this Stack Overflow question. See its answer for more details.

View a demo of converting charts to PDFs here.

Dependencies

Depends on jspdf and html2canvas.

Changelog

v1.0.2:

Fixed bug where an extra blank page was appearing at the end of outputted PDFs

v1.0.1:

Updated README and added attribution.

v1.0.0:

Initial commit.

You might also like...
Lightweight Vue component for drawing pure CSS donut charts
Lightweight Vue component for drawing pure CSS donut charts

vue-css-donut-chart Lightweight Vue component for drawing pure CSS donut charts Live demo Live demo can be found on the project page – https://dumptyd

Simple trend charts for Vue.js
Simple trend charts for Vue.js

Live Demo 💿 Installation npm i vue-trend-chart 🚀 Usage import Vue from "vue"; import TrendChart from "vue-trend-chart"; Vue.use(TrendChart); Exampl

A Vue component to create charts with ZingChart
A Vue component to create charts with ZingChart

Quickstart guide Quickly add charts to your Vue application with our ZingChart component This guide assumes some basic working knowledge of Vue. 1. In

Vue component to draw bar charts with d3 v4
Vue component to draw bar charts with d3 v4

vue-d3-barchart Small component to draw charts using d3 v4 Demo Demo Installation npm install vue-d3-barchart --save Usage ... d3-barchart :da

Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Generate beautiful charts with CSS and Vue: full accessibility and no hassle.
Generate beautiful charts with CSS and Vue: full accessibility and no hassle.

Visualization helps end-users understand data. Vue Charts.CSS helps frontend developers turn data into beautiful charts and graphs using the powerful Charts.CSS framework.

Google Charts plugin for Vue.js

vue-charts Google Charts plugin for Vue.js Demo Basic Line Chart Multiple Sets of Data, with auto-update Events Redraw on window resize Installation n

 Vue3-Charts is a SVG-based charting library that is very easy to use and highly customizable.
Vue3-Charts is a SVG-based charting library that is very easy to use and highly customizable.

Vue3-Charts is an SVG-based charting library that is very easy to use and highly customizable

 VueJS module for Flexmonster Pivot Table & Charts
VueJS module for Flexmonster Pivot Table & Charts

VueJS Module for Flexmonster Pivot Table & Charts

A time series chart component using vue-chartjs and TypeScript

A time series chart component A time series chart component using vue-chartjs and TypeScript. Demo https://y-ota.github.io/vue-timeserieschart-compone

Yusuke Ota 11 Mar 31, 2022
Base on Vue2.0 wrapper for ChartJs. (Deprecated)

Deprecated Package ?? This package is no longer maintain. ?? vue-charts Base on Vue2, wrapper for ChartJs. Vue js Chart js Work well with Laravel Rend

Gimmy 365 Sep 6, 2022
Vue3 wrapper for ChartJS

Vue3 ChartJS Wrapper Basic ChartJS 3 wrapper for Vue3 For ChartJS 2, see v0.3.0 Requirements Vue 3 ChartJS 3 Installation yarn add chart.js @j-t-mcc/v

Tyson McCarney 119 Sep 7, 2022
The web components for chartjs

Chartjs Web Components The web components for chart.js which is built on lit-element Live Demo https://fsx950223.github.io/chartjs-web-components/live

who who who 50 Jun 11, 2022
vue-c3 is a reusable vue component for c3 charts

vue-c3 vue-c3 is a reusable vue component for c3 charts Install npm install --save vue-c3 # and if it's not already installed: npm install --save c3

Christoph Biering 78 Jun 2, 2022
Vue.js Demos. jQWidgets Vue.js Components - Grids, Charts, Scheduling, Pivot Tables

jQWidgets Vue Components Demos You can view them online here: https://www.jqwidgets.com/vue/. Build modern Web Apps with jQWidgets and Vue. jQWidgets

jQWidgets 56 May 24, 2022
Vue components for d2b charts.

vue-d2b Project setup yarn install Compiles and hot-reloads for development yarn run serve Compiles and minifies for production yarn run build Run

d2b 38 Apr 8, 2021
Create beautiful JavaScript charts with one line of Vue

Vue Chartkick Create beautiful JavaScript charts with one line of Vue See it in action Supports Chart.js, Google Charts, and Highcharts Quick Start Ru

Andrew Kane 740 Sep 28, 2022
A Vue 2 integration using Frappe Charts

Vue 2 Frappe Charts This is a simple package to get using Frappe Charts within VueJS How to use First we need to import and initialize import Vue from

Steve McDougall 148 Jul 28, 2022
Reactive Vue.js wrapper for Google Charts lib

vue-google-charts Reactive Vue.js wrapper for Google Charts lib Table of contents Installation Usage Example Installation npm i vue-google-charts Def

Devstark 416 Sep 27, 2022