Common Issues

This page provides solutions for common problems related to the Kendo UI Diagrams.


Diagram Graphics Do Not Render in Internet Explorer


A security message suggesting that you enable the Intranet settings might appear. If you choose to do so, then you do not need to follow the steps below.


Select Internet Options > Security > Internet (or Local intranet) > Custom Level and enable Binary and script behaviors by ticking the Enable radio button.

Figure 2. Options and settings to apply to render the chart graphics

IEscript behaviors


Layout Is Different in Exported PDF Files

Such issues are typically caused by the different fonts that are used on screen and in the PDF.

For display, the browser substitutes the selected font with whatever is provided by the system. During export, you take the metrics from the actual font in use and determine the PDF layout from that. It is likely that the resulting PDF is displayed with a different font, leading to layout and encoding issues.


The solution is to make the fonts available for embedding. This means that the fonts should be available as binary TTF files and registered for export.

This is demonstrated in the PDF Export demo on Diagram as well.

The example below demonstrates how to embed fonts in exported PDF.

<button class='export-pdf k-button'>Save as PDF</button>

<div id="diagram"></div>

    // Import DejaVu Sans font for embedding

        "DejaVu Sans"             : "",
        "DejaVu Sans|Bold"        : "",
        "DejaVu Sans|Bold|Italic" : "",
        "DejaVu Sans|Italic"      : ""

<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="//"></script>

    $(".export-pdf").click(function() {

    function createDiagram() {
        var data = [{
            firstName: "Antonio",
            lastName: "Moreno",
            image: "antonio.jpg",
            title: "Team Lead",
            colorScheme: "#1696d3",
            items: [{
                firstName: "Elizabeth",
                image: "elizabeth.jpg",
                lastName: "Brown",
                title: "Design Lead",
                colorScheme: "#ef6944",
                items: [{
                    firstName: "Ann",
                    lastName: "Devon",
                    image: "ann.jpg",
                    title: "UI Designer",
                    colorScheme: "#ef6944"
            }, {
                firstName: "Diego",
                lastName: "Roel",
                image: "diego.jpg",
                title: "QA Engineer",
                colorScheme: "#ee587b",
                items: [{
                    firstName: "Fran",
                    lastName: "Wilson",
                    image: "fran.jpg",
                    title: "QA Intern",
                    colorScheme: "#ee587b"
            }, {
                firstName: "Felipe",
                lastName: "Izquiedro",
                image: "felipe.jpg",
                title: "Senior Developer",
                colorScheme: "#75be16",
                items: [{
                    firstName: "Daniel",
                    lastName: "Tonini",
                    image: "daniel.jpg",
                    title: "Developer",
                    colorScheme: "#75be16"

        function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;

            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                fill: dataItem.colorScheme

                Use the DejaVu Sans font for display and embedding in the PDF file.
                The standard PDF fonts have no support for Unicode characters.
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.firstName + " " + dataItem.lastName,
                fontFamily: "DejaVu Sans",
                fontSize: "14px",
                x: 10,
                y: 20,
                fill: "#fff"

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.title,
                fontFamily: "DejaVu Sans",
                fontSize: "14px",
                x: 10,
                y: 40,
                fill: "#fff"

            return g;

            dataSource: new{
                data: data,
                schema: {
                    model: {
                        children: "items"
            layout: {
                type: "layered"
            shapeDefaults: {
                visual: visualTemplate
            connectionDefaults: {
                stroke: {
                    color: "#979797",
                    width: 2

        var diagram = $("#diagram").getKendoDiagram();


See Also

In this article
Not finding the help you need? Improve this article