Edit this page

Common Issues

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

Rendering

Chart Graphics Do Not Render in Internet Explorer

Figure 1: Chart in the Internet Explorer with its graphics failing to render

Chart in IE

Important

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.

Solution

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

Chart Does Not Render with JavaScript Disabled

The Kendo UI Chart widgets requires JavaScript to run.

Solution

Enable JavaScript.

Chart Does Not Render on Mobile Device or Tablet

The browser must support SVG as the below ones do:

  1. iOS Safari 3.2 and later versions
  2. Opera Mobile 10.0 and later versions
  3. Android 3.0 and later versions

Export

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 will substitute the selected font with whatever is provided by the system. During export, you will take the metrics from the actual font in use and determine the PDF layout from that. It is likely that the resulting PDF will be displayed with a different font, leading to layout and encoding issues.

Solution

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 Charts as well.

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

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

<div id="chart"></div>

<script>
    // Import DejaVu Sans font for embedding

    kendo.pdf.defineFont({
        "DejaVu Sans"             : "https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans.ttf",
        "DejaVu Sans|Bold"        : "https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
        "DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
        "DejaVu Sans|Italic"      : "https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
    });
</script>

<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="//kendo.cdn.telerik.com/2017.2.621/js/pako_deflate.min.js"></script>

<script>
     $(".export-pdf").click(function() {
         $("#chart").getKendoChart().saveAsPDF();
     });

     $("#chart").kendoChart({
        pdf: {
            fileName: "Kendo UI Chart Export.pdf",
            proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
        },
        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]
        }]
    });
</script>

See Also

Other articles on styling, appearance, and rendering of Kendo UI widgets:

Other articles on troubleshooting:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy