New to Kendo UI for jQuery? Download free 30-day trial

Troubleshoot Common Issues in the Charts

Environment

Product Progress® Kendo UI® Chart for jQuery
Kendo Version From 2017.2.504

Cases

This article provides solutions for common issues you might encounter while working with the Kendo UI Charts for jQuery.

Chart labels overlap after refresh in Internet Explorer

This limitation is browser-specific and is due to the lack of events that can be handled in regards to the font loading of the browser.

Solution

To work around this issue, either:

The following Dojo example demonstrates how to handle the issue by using kendo-pack-fonts. In Internet Explorer, open the implementation in full-screen mode.

 <script src="https://cdn.rawgit.com/telerik/kendo-pack-fonts/8dc63142/sample/fonts.js"></script>
    <div id="example">
      <div class="demo-section k-content wide">
        <div id="chart"></div>
      </div>
       <script>
        function createChart() {
          $("#chart").kendoChart({
            title: {
              text: "Gross domestic product growth \n /GDP annual %/"
            },
            legend: {
              position: "bottom",
              labels: {
                font: "10px 'DejaVu Sans'"
              }
            },
            chartArea: {
              background: ""
            },
            seriesDefaults: {
              type: "line",
              style: "smooth"
            },
            series: [{
              name: "India Lorem ipsum dolor sit amet, consectetur adipisicing elit",
              data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
            },{
              name: "World Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
              data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
            },{
              name: "Russian Federation Lorem ipsum dolor sit amet, consectetur adipisicing elit",
              data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
            },{
              name: "Haiti  Lorem ipsum dolor sit amet, consectetur adipisicing elits",
              data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
            },{
              name: "Haiti  Lorem ipsum dolor sit amet, consectetur adipisicing elits",
              data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
            },{
              name: "Haiti  Lorem ipsum dolor sit amet, consectetur adipisicing elits",
              data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
            },{
              name: "Haiti  Lorem ipsum dolor sit amet, consectetur adipisicing elits",
              data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
            },{
              name: "Haiti  Lorem ipsum dolor sit amet, consectetur adipisicing elits",
              data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
            },{
              name: "Haiti  Lorem ipsum dolor sit amet, consectetur adipisicing elits",
              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],
              majorGridLines: {
                visible: false
              },
              labels: {
                rotation: "auto"
              }
            },
            tooltip: {
              visible:false
            }
          });
        }
        $(document).ready(createChart);
      </script>
    </div>

Chart graphics do not render in Internet Explorer

Kendo UI for jQuery A Chart in the Internet Explorer with its graphics failing to render

A security message which prompts you to enable the Intranet settings might appear. If you do so, skip the following steps.

Solution

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

Kendo UI for jQuery Options and settings to apply to render the chart graphics

The Chart does not render when JavaScript is disabled

The Kendo UI Chart widgets requires JavaScript to run.

Solution

Enable JavaScript.

The Chart does not render on mobile devices or tablets

The browser you are using does not support SVG.

Solution

The browser must support SVG as the below ones do:

  • iOS Safari 3.2 and later versions
  • Opera Mobile 10.0 and later versions
  • Android 3.0 and later versions

The layout of the Chart is different in the 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 which leads to layout and encoding issues.

Solution

Make the fonts available for embedding. This means that the fonts have to be available as binary TTF files and registered for export which is demonstrated in the PDF Export demo on Charts as well.

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

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

<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

In this article