Export
The Chart enables you to export their content to PDF, SVG, or Image files.
PDF Export
Starting with v2023.3.1115 the Pako library is no longer distributed with the rest of the Kendo UI for jQuery scripts. You must use one of the official distribution channels such as
unpkginstead.
To initiate the export to PDF, call the saveAsPdf method. To enable compression, include the Pako Deflate library in the page.
For more information, refer to the following resources:
The following example demonstrates how to enable the PDF export functionality of the Chart.
<!-- Load Pako Deflate library to enable PDF compression -->
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
<button class='export-pdf k-button'>Save as PDF</button>
<div id="chart"></div>
<script>
$(".export-pdf").click(function() {
$("#chart").getKendoChart().saveAsPDF();
});
function createChart() {
$("#chart").kendoChart({
pdf: {
fileName: "Kendo UI Chart Export.pdf"
},
title: {
text: "Gross domestic product growth \n /GDP annual %/"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "area",
area: {
line: {
style: "smooth"
}
}
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}, {
name: "Haiti",
data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
}
});
}
$(document).ready(createChart);
</script>
Advanced Export
The Chart allows you to retrieve Scalable Vector Graphics (SVG), Image (PNG) or PDF representation of its content as a Base64-encoded string. You can send this content to a service for further processing or to offer it as a file to the user. For more information, refer to this online demo.
The advanced export functionality is delivered though the following methods:
The following example demonstrates how to obtain an image from the Chart.
<div id="chart"></div>
<script>
$("#chart").kendoChart({
transitions: false,
series: [{
type: "column",
data: [1, 2, 3]
}, {
type: "line",
data: [2, 1, 3]
}, {
type: "area",
data: [3, 1, 2]
}]
});
var chart = $("#chart").getKendoChart();
chart.exportImage().done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: "chart.png"
});
});
</script>
Using Server Proxy
Internet Explorer 9 and Safari do not support the saving of files and require the implementation of a server proxy. To specify the URL of the server proxy, set the proxyURL option.
<!-- Load Pako Deflate library to enable PDF compression -->
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
<button class='export-pdf k-button'>Save as PDF</button>
<div id="chart"></div>
<script>
$(".export-pdf").click(function() {
$("#chart").getKendoChart().saveAsPDF();
});
function createChart() {
$("#chart").kendoChart({
pdf: {
proxyURL: "/proxy"
},
title: {
text: "Gross domestic product growth \n /GDP annual %/"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "area",
area: {
line: {
style: "smooth"
}
}
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}, {
name: "Haiti",
data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
}
});
}
$(document).ready(createChart);
</script>
Saving Files on the Server
To send the generated file to a remote service, set the proxyUrl and forceProxy to true. If the proxy returns 204 No Content, the Save As... dialog will not appear on the client.
The following example demonstrates how to post files to the server.
<!-- Load Pako Deflate library to enable PDF compression -->
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
<button class='export-pdf k-button'>Save as PDF</button>
<div id="chart"></div>
<script>
$(".export-pdf").click(function() {
$("#chart").getKendoChart().saveAsPDF();
});
function createChart() {
$("#chart").kendoChart({
pdf: {
forceProxy: true,
proxyURL: "/proxy"
},
title: {
text: "Gross domestic product growth \n /GDP annual %/"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "area",
area: {
line: {
style: "smooth"
}
}
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}, {
name: "Haiti",
data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
}
});
}
$(document).ready(createChart);
</script>
Embedding Custom Fonts
The default fonts in PDF files do not support Unicode. To support international characters, you have to embed an external font.
- Fonts must be loaded by the browser before the Chart is initialized. It is usually sufficient to make use of the font on a portion of the page.
- The Chart preloads automatically in browsers that support the CSS Font Loading Module.
Kendo UI ships the Deja Vu font family as part of its distributions. For more information, refer to the article on the supported custom fonts by Kendo UI.
The following example demonstrates how to handle custom fonts by embedding a custom font for a Chart title.
<script>
// Import DejaVu Sans font for embedding.
// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. kendo.cdn.telerik.com.
kendo.pdf.defineFont({
"DejaVu Sans" : "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
});
</script>
<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
<button class='export-pdf k-button'>Save as PDF</button>
<div id="chart"></div>
<script>
$(".export-pdf").click(function() {
$("#chart").getKendoChart().saveAsPDF();
});
function createChart() {
$("#chart").kendoChart({
pdf: {
fileName: "Kendo UI Chart Export.pdf"
},
title: {
text: "Gross domestic product growth \n /GDP annual %/",
font: "bold 16px 'DejaVu Sans'"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "area",
area: {
line: {
style: "smooth"
}
}
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}, {
name: "Haiti",
data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
}
});
}
$(document).ready(createChart);
</script>
Known Limitations
All known limitations of the Drawing library apply to the PDF export of the Chart.
The following limitations are the most important among the listed ones for exporting the Chart to PDF:
- The maximum document size is limited to 5080x5080mm (200x200 inches) by the PDF 1.5 specification. Larger files might not open in all viewers.
- Older browsers, such as Internet Explorer 9 and Safari, require the implementation of a server proxy. For more information, refer to the
proxyUrlAPI reference.