Components / Charts

Troubleshooting

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

Installation

The kendo-chart component requires Hammer.js to be installed as a dependency. The error occurs, because Hammer.js is not loaded.

Solution

Install the Hammer.js package and import it by using the import 'hammerjs'; command.

The Chart is clipped during printing

The Chart element may overflow the page during printing.

To resolve this issue:

  1. Set the print dimensions of the Chart by using a Media Query.
  2. Before printing, call the resize method.

Due to Bug 774398, Firefox does not support the suggested approach.

import { Component, OnInit, OnDestroy, ViewEncapsulation, ViewChild } from '@angular/core';
import { ChartComponent } from '@progress/kendo-angular-charts';

@Component({
    selector: 'my-app',

    // Set print dimensions using a media query
    styles: [`
      @media print {
        kendo-chart {
          width: 200mm;
        }
      }
    `],

    template: `
        <kendo-chart #chart [categoryAxis]="{ categories: categories }">
            <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
            <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
            <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
            <kendo-chart-series>
                <kendo-chart-series-item *ngFor="let item of series"
                    type="line" style="smooth" [data]="item.data" [name]="item.name">
                </kendo-chart-series-item>
            </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent implements OnInit, OnDestroy {
  public series: any[] = [{
    name: 'India',
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
  }, {
    name: 'Russian Federation',
    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
  }, {
    name: 'Germany',
    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
  }, {
    name: 'World',
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
  }];

  public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];

  @ViewChild('chart')
  public chart: ChartComponent;

  // Update Chart size on media change
  // https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries
  private matchPrint: MediaQueryList = window.matchMedia('print');
  private resizeChart = () => this.chart.resize();

  public ngOnInit(): void {
    this.matchPrint.addListener(this.resizeChart);
  }

  public ngOnDestroy(): void {
    if (this.matchPrint) {
      this.matchPrint.removeListener(this.resizeChart);
      this.matchPrint = null;
    }
  }
}

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article