Chart print in Vue Chart component

3 Feb 202624 minutes to read

Print

The rendered chart can be printed directly from the browser by calling the public print method. This method accepts an array of element IDs or element references to print; by default it prints the chart element itself.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-button id='print' @click='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 setup>
import { provide, ref } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, PolarSeries, Category, AreaSeries } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

const chart = ref(null);
const 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 }
];
const primaryXAxis = {
  valueType: 'Category'
};
const primaryYAxis = {
  minimum: -5, maximum: 35, interval: 10,
  title: 'Temperature in Celsius',
  labelFormat: '{value}C'
};
const title = "Climate Graph-2012";

provide('chart', [PolarSeries, Category, AreaSeries]);

const print = () => {
  chart.value.print();
}

</script>
<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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, PolarSeries, Category, AreaSeries } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";


export default {
  name: "App",
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective,
    'ejs-button': ButtonComponent
  },
  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

Export the rendered chart to JPEG, PNG, SVG, or PDF using the chart export method. To export chart data into XLSX or CSV, use the Excel/CSV export options. The primary parameters for export are type (format) and fileName (output file name).

Optional parameters include:

orientation — portrait or landscape for PDF export
controls — a collection of controls for multi-control export
width — exported width
height — exported height

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, PolarSeries, Category, AreaSeries, Export } from "@syncfusion/ej2-vue-charts";


const 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 }
];
const primaryXAxis = {
  valueType: 'Category'
};
const primaryYAxis = {
  minimum: -5, maximum: 35, interval: 10,
  title: 'Temperature in Celsius',
  labelFormat: '{value}C'
};
const title = "Climate Graph-2012";

provide('chart', [PolarSeries, Category, AreaSeries, Export]);

const loaded = (args) => {
  args.chart.exportModule.export('PNG', 'export');
};

</script>
<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>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, PolarSeries, Category, AreaSeries, Export } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  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.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-button cssClass="e-flat" iconCss='e-icons e-export-icon' isPrimary=true v-on:click='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 setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, Export } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";


const seriesData = [
  { x: 'John', y: 10000 },
  { x: 'Jake', y: 12000 },
  { x: 'Peter', y: 18000 },
  { x: 'James', y: 11000 },
  { x: 'Mary', y: 9700 }
];
const primaryXAxis = {
  title: 'Manager',
  valueType: 'Category',
  majorGridLines: { width: 0 }
};
const primaryYAxis = {
  title: 'Sales',
  minimum: 0,
  maximum: 20000,
  majorGridLines: { width: 0 }
};
const title = "Sales Comparision";

provide('chart', [ColumnSeries, Category, Export]);

const onClick = () => {
  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>
<template>
  <div id="app">
    <ejs-button cssClass="e-flat" iconCss='e-icons e-export-icon' isPrimary=true v-on:click='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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, Export } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  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 () {
      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.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-button cssClass="e-flat" iconCss='e-icons e-export-icon' isPrimary=true v-on:click='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 setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, LineSeries, Category, DateTime, Export } from "@syncfusion/ej2-vue-charts";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationDataLabel, AccumulationLegend } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";



const seriesData = [
  { x: 'John', y: 10000 },
  { x: 'Jake', y: 12000 },
  { x: 'Peter', y: 18000 },
  { x: 'James', y: 11000 },
  { x: 'Mary', y: 9700 }
];
const 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 }
];
const 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 }
];
const 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%' }
];
const primaryXAxis = {
  title: 'Manager',
  valueType: 'Category',
  majorGridLines: { width: 0 }
};
const primaryYAxis = {
  title: 'Sales',
  minimum: 0,
  maximum: 20000,
  majorGridLines: { width: 0 }
};
const marker = {
  visible: true,
  width: 10,
  height: 10
};
const primaryXAxis1 = {
  valueType: 'DateTime',
  labelFormat: 'y',
  intervalType: 'Years',
  edgeLabelPlacement: 'Shift',
  majorGridLines: { width: 0 }
};
const primaryYAxis1 = {
  labelFormat: '{value}%',
  rangePadding: 'None',
  minimum: 0,
  maximum: 100,
  interval: 20,
  lineStyle: { width: 0 },
  majorTickLines: { width: 0 },
  minorTickLines: { width: 0 }
};
const title = "Sales Comparision";
const title1 = "Medal Count";
const title2 = "Project Cost Breakdown";
const enableSmartLabels = true;
const datalabel = { visible: true, name: 'text', position: 'Inside', font: { fontWeight: 600, color: '#ffffff' } };
const legendSettings = {
  visible: true
};
const startAngle = '0';
const endAngle = '360';

provide('chart', [ColumnSeries, Category, DateTime, Export, LineSeries],
  'accumulationchart', [PieSeries, AccumulationDataLabel, AccumulationLegend]);

const onClick = () => {
  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>
<template>
  <div id="app">
    <ejs-button cssClass="e-flat" iconCss='e-icons e-export-icon' isPrimary=true v-on:click='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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, LineSeries, Category, DateTime, Export } from "@syncfusion/ej2-vue-charts";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationDataLabel, AccumulationLegend } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";


export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective,
    "ejs-accumulationchart": AccumulationChartComponent,
    "e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
    "e-accumulation-series": AccumulationSeriesDirective
  },
  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 () {
      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.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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 setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, Export } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";


const 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 }
];
const primaryXAxis = {
  valueType: 'Category',
  title: 'Countries'
};
const title = "Olympic Medals";

provide('chart', [ColumnSeries, Category, Export]);

const onClick = () => {
  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>
<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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, Export } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";


export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  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 () {
      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 base64 string by utilizing HTML canvas. This process involves rendering the chart onto a canvas element and then converting the canvas content to a base64 string.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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 setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesDirective as ESeries, SeriesCollectionDirective as ESeriesCollection, ColumnSeries, Legend, Tooltip,DateTime, Category, Highlight } from "@syncfusion/ej2-vue-charts";

const 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 }
        
    ];

const primaryXAxis = {
    valueType: 'Category',
    majorGridLines: { width: 0 },
    majorTickLines: { width: 0 },
    minorTickLines: { width: 0 }
};

const primaryYAxis = {
    minimum: 0,
    maximum: 40,
    interval: 10,
    lineStyle: {width : 0},
    minorTickLines: {width: 0},
    majorTickLines: {width : 0},
};

const chartArea = {
    border: {
      width: 0
    }
};

const print = function () {
  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();
    };
};

provide('chart',  [ColumnSeries, Legend, Tooltip, Category,DateTime, Highlight]);

</script>
<style>
 #container {
   height: 350px;
 }
  .e-export-icon::before {
   content: '\e728';
 }
</style>
<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 { ChartComponent, SeriesDirective, SeriesCollectionDirective, ColumnSeries, Legend, Tooltip,DateTime, Category, Highlight } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,
"ejs-button":ButtonComponent,

},

  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 () {
      const svg = document.querySelector("#chartcontainer_svg");
      if (!svg) {
        console.error("Chart SVG element not found");
        return;
      }
      const svgData = new XMLSerializer().serializeToString(svg);
      const canvas = document.createElement("canvas");
      document.body.appendChild(canvas);
      const svgSize = svg.getBoundingClientRect();
      canvas.width = svgSize.width;
      canvas.height = svgSize.height;
      const ctx = canvas.getContext("2d");
      const img = document.createElement("img");
      img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
      img.onload = function() {
        ctx.drawImage(img, 0, 0);
        const imagedata = canvas.toDataURL("image/png");
        console.log(imagedata); // printed base64 in console
        canvas.remove();
      };
      img.onerror = function() {
        console.error("Failed to load image for export");
        canvas.remove();
      };
    },
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
  .e-export-icon::before {
   content: '\e728';
 }
</style>

Excel export

You can export the rendered chart data to Excel in either XLSX or CSV format. The excelProperties property in the beforeExport event allows users to customize the exported Excel sheet by modifying row, column, and cell properties before the file is generated. You can customize row titles, column titles, cell values, as well as row and column widths.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <ejs-chart ref="chart" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :loaded='loaded' :beforeExport = 'beforeExport'>
    <e-series-collection>
      <e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='Area'> </e-series>
    </e-series-collection>
  </ejs-chart>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, PolarSeries, Category, AreaSeries, Export } from "@syncfusion/ej2-vue-charts";


const 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 }
];
const primaryXAxis = {
  valueType: 'Category'
};
const primaryYAxis = {
  minimum: -5, maximum: 35, interval: 10,
  title: 'Temperature in Celsius',
  labelFormat: '{value}C'
};
const title = "Climate Graph-2012";
const beforeExport = (args) => {
  args.excelProperties.rows[0].cells[0].value = 'Changed Title';
  args.excelProperties.rows[1].cells[0].value = 'X Title';
  args.excelProperties.rows[1].cells[1].value = 'Y Title';
  args.excelProperties.rows[2].cells[1].value = args.excelProperties.rows[2].cells[1].value + 2;
}
provide('chart', [PolarSeries, Category, AreaSeries, Export]);

const loaded = (args) => {
  args.chart.exportModule.export('XLSX', 'export');
};

</script>
<template>
  <ejs-chart ref="chart" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :loaded='loaded' :beforeExport = 'beforeExport'>
    <e-series-collection>
      <e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='Area'> </e-series>
    </e-series-collection>
  </ejs-chart>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, PolarSeries, Category, AreaSeries, Export } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  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: {
    beforeExport: function (args) {
      args.excelProperties.rows[0].cells[0].value = 'Changed Title';
      args.excelProperties.rows[1].cells[0].value = 'X Title';
      args.excelProperties.rows[1].cells[1].value = 'Y Title';
      args.excelProperties.rows[2].cells[1].value = args.excelProperties.rows[2].cells[1].value + 2;
    },
    loaded: function (args) {
      args.chart.exportModule.export('XLSX', 'export');
    }
  }
};
</script>

Search docs

Ask HelpBot