Chart print in Vue Chart component
20 Dec 202324 minutes to read
The rendered chart can be printed directly from the browser by calling the public method print. You can pass array of ID of elements or element to this method. By default it take element of the chart.
<template>
<div id="app">
<ejs-button id='print' @click.native='print'>Print</ejs-button>
<ejs-chart ref="chart" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' style="float: left">
<e-series-collection>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='Area'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, PolarSeries, Category, AreaSeries } from "@syncfusion/ej2-vue-charts";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ChartPlugin);
Vue.use(ButtonPlugin);
export default {
data() {
return {
seriesData:[
{ x: 'Jan', y: -1 }, { x: 'Feb', y: -1 }, { x: 'Mar', y: 2 },
{ x: 'Apr', y: 8 }, { x: 'May', y: 13 }, { x: 'Jun', y: 18 },
{ x: 'Jul', y: 21 }, { x: 'Aug', y: 20 }, { x: 'Sep', y: 16 },
{ x: 'Oct', y: 10 }, { x: 'Nov', y: 4 }, { x: 'Dec', y: 0 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
minimum: -5, maximum: 35, interval: 10,
title: 'Temperature in Celsius',
labelFormat: '{value}C'
},
title: "Climate Graph-2012"
};
},
provide: {
chart: [PolarSeries, Category, AreaSeries]
},
methods: {
print: function() {
this.$refs.chart.print();
}
}
};
</script>Export
The rendered chart can be exported to JPEG, PNG, SVG, PDF, XLSX, or CSV format using the export method in chart. The input parameters for this method are type for format and fileName for result.
The optional parameters for this method are,
-
orientation- either portrait or landscape mode during PDF export, -
controls- pass collections of controls for multiple export, -
width- width of chart export, and -
height- height of chart export.
<template>
<ejs-chart ref="chart" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :loaded='loaded'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='Area'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, PolarSeries, Category, AreaSeries, Export } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ x: 'Jan', y: -1 }, { x: 'Feb', y: -1 }, { x: 'Mar', y: 2 },
{ x: 'Apr', y: 8 }, { x: 'May', y: 13 }, { x: 'Jun', y: 18 },
{ x: 'Jul', y: 21 }, { x: 'Aug', y: 20 }, { x: 'Sep', y: 16 },
{ x: 'Oct', y: 10 }, { x: 'Nov', y: 4 }, { x: 'Dec', y: 0 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
minimum: -5, maximum: 35, interval: 10,
title: 'Temperature in Celsius',
labelFormat: '{value}C'
},
title: "Climate Graph-2012"
};
},
provide: {
chart: [PolarSeries, Category, AreaSeries, Export]
},
methods: {
loaded: function(args) {
args.chart.exportModule.export('PNG', 'export');
}
}
};
</script>Adding header and footer in PDF export
In the export method, specify the following parameters to add a header and footer text to the exported PDF document:
-
header- Specify the text that should appear at the top of the exported PDF document. -
footer- Specify the text that should appear at the bottom of the exported PDF document.
<template>
<div id="app">
<ejs-button cssClass="e-flat" iconCss='e-icons e-export-icon' isPrimary=true v-on:click.native='onClick' id="exportBtn">EXPORT</ejs-button>
<ejs-chart ref="chart" id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='x' yName='y' width=2> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, Export } from "@syncfusion/ej2-vue-charts";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ChartPlugin);
Vue.use(ButtonPlugin);
export default {
data: function() {
return {
seriesData: [
{ x: 'John', y: 10000 },
{ x: 'Jake', y: 12000 },
{ x: 'Peter', y: 18000 },
{ x: 'James', y: 11000 },
{ x: 'Mary', y: 9700 }
],
primaryXAxis: {
title: 'Manager',
valueType: 'Category',
majorGridLines: { width: 0 }
},
primaryYAxis: {
title: 'Sales',
minimum: 0,
maximum: 20000,
majorGridLines: { width: 0 }
},
title: "Sales Comparision"
};
},
provide: {
chart: [ColumnSeries, Category, Export]
},
methods: {
onClick: function(args) {
const header = {
content: 'Chart Header',
fontSize: 15
};
const footer = {
content: 'Chart Footer',
fontSize: 15
};
let chart1 = document.getElementById("container").ej2_instances[0];
chart1.exportModule.export('PDF', 'Chart', 1, [chart1], null, null, true, header, footer);
},
}
};
</script>
<style>
#container {
height: 350px;
}
.e-export-icon::before {
content: '\e728';
}
</style>Exporting charts into separate page during the PDF export
During PDF export, set the exportToMultiplePage parameter to true to export each chart as a separate page.
<template>
<div id="app">
<ejs-button cssClass="e-flat" iconCss='e-icons e-export-icon' isPrimary=true v-on:click.native='onClick' id="exportBtn">EXPORT</ejs-button>
<ejs-chart ref="chart" id="container" :title='title1' :primaryXAxis='primaryXAxis1' :primaryYAxis='primaryYAxis1'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Line' xName='x' yName='y' width=2 name='Germany' :marker='marker'> </e-series>
<e-series :dataSource='seriesData2' type='Line' xName='x' yName='y' width=2 name='England' :marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
<ejs-chart ref="chart1" id="container1" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='x' yName='y' width=2> </e-series>
</e-series-collection>
</ejs-chart>
<ejs-accumulationchart id="container2" :title='title2' enableSmartLabels='enableSmartLabels' :legendSettings='legendSettings'>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData3' xName='x' yName='y' :dataLabel='datalabel' radius='70%' :startAngle='startAngle' :endAngle='endAngle'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, LineSeries, Category, DateTime, Export } from "@syncfusion/ej2-vue-charts";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel, AccumulationLegend } from "@syncfusion/ej2-vue-charts";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ChartPlugin);
Vue.use(ButtonPlugin);
Vue.use(AccumulationChartPlugin);
export default {
data: function() {
return {
seriesData: [
{ x: 'John', y: 10000 },
{ x: 'Jake', y: 12000 },
{ x: 'Peter', y: 18000 },
{ x: 'James', y: 11000 },
{ x: 'Mary', y: 9700 }
],
seriesData1: [
{ x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
{ x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },
{ x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
{ x: new Date(2011, 0, 1), y: 70 }
],
seriesData2: [
{ x: new Date(2005, 0, 1), y: 28 }, { x: new Date(2006, 0, 1), y: 44 },
{ x: new Date(2007, 0, 1), y: 48 }, { x: new Date(2008, 0, 1), y: 50 },
{ x: new Date(2009, 0, 1), y: 66 }, { x: new Date(2010, 0, 1), y: 78 },
{ x: new Date(2011, 0, 1), y: 84 }
],
seriesData3: [
{ x: 'Labour', y: 18, text: '18%' }, { x: 'Legal', y: 8, text: '8%' },
{ x: 'Production', y: 15, text: '15%' }, { x: 'License', y: 11, text: '11%' },
{ x: 'Facilities', y: 18, text: '18%' }, { x: 'Taxes', y: 14, text: '14%' },
{ x: 'Insurance', y: 16, text: '16%' }
],
primaryXAxis: {
title: 'Manager',
valueType: 'Category',
majorGridLines: { width: 0 }
},
primaryYAxis: {
title: 'Sales',
minimum: 0,
maximum: 20000,
majorGridLines: { width: 0 }
},
marker: {
visible: true,
width: 10,
height: 10
},
primaryXAxis1: {
valueType: 'DateTime',
labelFormat: 'y',
intervalType: 'Years',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
},
primaryYAxis1: {
labelFormat: '{value}%',
rangePadding: 'None',
minimum: 0,
maximum: 100,
interval: 20,
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
title: "Sales Comparision",
title1: "Medal Count",
title2: "Project Cost Breakdown",
enableSmartLabels: true,
datalabel: { visible: true, name: 'text', position: 'Inside', font: { fontWeight: 600, color: '#ffffff' } },
legendSettings: {
visible: true
},
startAngle: '0',
endAngle: '360'
};
},
provide: {
chart: [ColumnSeries, Category, DateTime, Export, LineSeries],
accumulationchart: [PieSeries, AccumulationDataLabel, AccumulationLegend]
},
methods: {
onClick: function(args) {
let chart1 = document.getElementById("container").ej2_instances[0];
let chart2 = document.getElementById("container1").ej2_instances[0];
let chart3 = document.getElementById("container2").ej2_instances[0];
chart1.exportModule.export('PDF', 'Chart', null, [chart1, chart2, chart3], null, null, true, undefined, undefined, true);
},
}
};
</script>
<style>
#container {
height: 350px;
}
.e-export-icon::before {
content: '\e728';
}
</style>Multiple chart export
You can export the multiple charts in single page by passing the multiple chart objects in the export method of chart. To export multiple charts in a single page, follow the given steps:
Initially, render more than one chart to export, and then add button to export the multiple charts. In button click, call the export method in charts, and then pass the multiple chart objects in the export method.
<template>
<div id="app">
<ejs-button cssClass="e-flat" iconCss='e-icons e-export-icon' isPrimary=true v-on:click.native='onClick' id="exportBtn">EXPORT</ejs-button>
<ejs-chart ref="chart" id="container":title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
<ejs-chart ref="chart1" id="container1":title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, Export } from "@syncfusion/ej2-vue-charts";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ChartPlugin);
Vue.use(ButtonPlugin);
export default {
data: function() {
return {
seriesData: [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
],
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, Export]
},
methods: {
onClick: function(args) {
let chart1 = document.getElementById("container").ej2_instances[0];
let chart2 = document.getElementById("container1").ej2_instances[0];
chart1.exportModule.export('PNG', 'Chart', null, [chart1, chart2]);
},
}
};
</script>
<style>
#container {
height: 350px;
}
.e-export-icon::before {
content: '\e728';
}
</style>Exporting chart using base64 string
The chart can be exported as an image in the form of a basering by utilizing HTML canvas. This process involves rendering the chart onto a canvas element and then converting the canvas content to a base64 string.
<template>
<div id="app">
<ejs-chart style='display:block' align='center' id='chartcontainer' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='x' yName='y'> </e-series>
</e-series-collection>
</ejs-chart>
<ejs-button id='togglebtn' @click='print' cssClass="e-flat" :iconCss='iconCss'
isPrimary="true">Print</ejs-button>
</div>
</template>
<script>
import Vue from "vue";
import { ChartComponent, ChartPlugin, SeriesDirective, SeriesCollectionDirective, ColumnSeries, Legend, Tooltip,DateTime, Category, Highlight } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data: function() {
return {
seriesData: [
{ x: 'DEU', y: 35.5 }, { x: 'CHN', y: 18.3 }, { x: 'ITA', y: 17.6 }, { x: 'JPN', y: 13.6 },
{ x: 'US', y: 12 }, { x: 'ESP', y: 5.6 }, { x: 'FRA', y: 4.6 }, { x: 'AUS', y: 3.3 },
{ x: 'BEL', y: 3 }, { x: 'UK', y: 2.9 }
],
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
//Initializing Primary Y Axis
primaryYAxis: {
minimum: 0,
maximum: 40,
interval: 10,
lineStyle: {width : 0},
minorTickLines: {width: 0},
majorTickLines: {width : 0},
},
chartArea: {
border: {
width: 0
}
},
};
},
provide: {
chart: [ColumnSeries, Legend, Tooltip, Category,DateTime, Highlight]
},
methods: {
print: function (args) {
var svg = document.querySelector("#chartcontainer_svg");
var svgData = new XMLSerializer().serializeToString(svg);
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width;
canvas.height = svgSize.height;
var ctx = canvas.getContext("2d");
var img = document.createElement("img");
img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
img.onload = function() {
ctx.drawImage(img, 0, 0);
var imagedata = canvas.toDataURL("image/png");
console.log(imagedata); // printed base64 in console
canvas.remove();
};
},
}
};
</script>
<style>
#container {
height: 350px;
}
.e-export-icon::before {
content: '\e728';
}
</style>