All Components

Export Options

The Chart delivers built-in support for Image, PDF, and SVG export.

The result is a Base64-encoded file that can be sent to a service or saved on the client machine using the File Saver package.

The Chart supports the following export options:

Exporting to Images

The following example demonstrates how to save the Chart as a PNG image by using the exportImage method.

import { Component, ViewChild } from '@angular/core';

import { ChartComponent } from '@progress/kendo-angular-charts';
import { saveAs } from '@progress/kendo-file-saver';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="exportChart()">
      Export as Image
    </button>
    <kendo-chart #chart>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="seriesData">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
  @ViewChild('chart')
  private chart: ChartComponent;

  public seriesData: number[] = [1, 2, 3, 5];

  public exportChart(): void {
    this.chart.exportImage().then((dataURI) => {
      saveAs(dataURI, 'chart.png');
    });
  }
}

By default, the exported image is of the same size as the Chart DOM element. If required, you can export to a different resolution. If you change the image size, the image quality will not be affected because the rendering of the Chart is based on vector graphics.

import { Component, ViewChild } from '@angular/core';

import { ChartComponent } from '@progress/kendo-angular-charts';
import { saveAs } from '@progress/kendo-file-saver';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="exportChart()">
      Export as Image
    </button>
    <kendo-chart #chart style='width: 600px; height: 400px;'>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="seriesData">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
  @ViewChild('chart')
  private chart: ChartComponent;

  public seriesData: number[] = [1, 2, 3, 5];

  public exportChart(): void {
    this.chart.exportImage({
      width: 1200,
      height: 800
    }).then((dataURI) => {
      saveAs(dataURI, 'chart-large.png');
    });
  }
}

Exporting to Drawing Visuals

The exportVisual method returns a Drawing Scene you can further process.

The following example demonstrates how to export the Chart as a Drawing visual scene by using the exportVisual method.

import { Component, ViewChild } from '@angular/core';

import { ChartComponent } from '@progress/kendo-angular-charts';
import { saveAs } from '@progress/kendo-file-saver';
import { transform } from '@progress/kendo-drawing/geometry';
import { exportImage, Group } from '@progress/kendo-drawing';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="exportChart()">
      Rotate and Export
    </button>
    <kendo-chart #chart>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="seriesData">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
  @ViewChild('chart')
  private chart: ChartComponent;

  public seriesData: number[] = [1, 2, 3, 5];

  public exportChart(): void {
    const visual = this.chart.exportVisual();
    const center = visual.bbox().center();

    // Rotate 45 degrees around center
    visual.transform(transform().rotate(45, center));

    exportImage(visual).then((dataURI) => {
      saveAs(dataURI, 'chart-rotated.png');
    });
  }
}

Exporting to PDF

The exportPDF method from the Drawing library takes a visual element and produces a PDF file.

Saving Charts in PDF

The following example demonstrates how to save the Chart as a PDF file by using the exportPDF method.

import { Component, ViewChild } from '@angular/core';

import { ChartComponent } from '@progress/kendo-angular-charts';
import { saveAs } from '@progress/kendo-file-saver';
import { exportPDF } from '@progress/kendo-drawing/pdf';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="exportChart()">
      Export as PDF
    </button>
    <kendo-chart #chart>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="seriesData">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
  @ViewChild('chart')
  private chart: ChartComponent;

  public seriesData: number[] = [1, 2, 3, 5];

  public exportChart(): void {
    const visual = this.chart.exportVisual();
    exportPDF(visual, {
      paperSize: "A4",
      landscape: true
    }).then((dataURI) => {
      saveAs(dataURI, 'chart.pdf');
    });
  }
}

Fitting Charts to Paper Size

If the rendered Chart is bigger than the exported PDF paper size, then the Chart will be clipped. To avoid this behavior, either:

  • Set the exportVisual size, or
  • Scale the drawing element which is returned by the exportVisual method.

The following example demonstrates how to fit the exported Chart to the paper size of the PDF file.

import { saveAs } from '@progress/kendo-file-saver';
import { exportPDF } from '@progress/kendo-drawing/pdf';
import { Rect } from '@progress/kendo-drawing/geometry';
import { fit, Group } from '@progress/kendo-drawing';

function mm(val: number): number {
  return val * 2.8347;
}

const PAGE_RECT = new Rect([0, 0], [mm(210 - 20), mm(297 - 20)]);

@Component({
  selector: 'my-app',
  template: `
    <button (click)="exportScaledChart(chart)">
      Export as PDF(scаle)
    </button>
    <button (click)="exportSizedChart(chart)">
      Export as PDF(size)
    </button>
    <kendo-chart #chart>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {

  public exportSizedChart(chart): void {
    const visual = chart.exportVisual({
      width: PAGE_RECT.size.width
    });

    this.exportElement(visual);
  }

  public exportScaledChart(chart): void {
    const visual = chart.exportVisual();
    const content = new Group();

    content.append(visual);
    fit(content, PAGE_RECT);

    this.exportElement(content);
  }

  private exportElement(element: any): void {
    exportPDF(element, {
      paperSize: "A4",
      margin: "1cm"
    }).then((dataURI) => {
      saveAs(dataURI, 'chart.pdf');
    });
  }
}

Exporting to SVG

The following example demonstrates how to save the Chart as a SVG file by using the exportSVG method.

import { Component, ViewChild } from '@angular/core';

import { ChartComponent } from '@progress/kendo-angular-charts';
import { saveAs } from '@progress/kendo-file-saver';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="exportChart()">
      Export as SVG
    </button>
    <kendo-chart #chart>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="seriesData">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
  @ViewChild('chart')
  private chart: ChartComponent;

  public seriesData: number[] = [1, 2, 3, 5];

  public exportChart(): void {
    this.chart.exportSVG().then((dataURI) => {
      saveAs(dataURI, 'chart.svg');
    });
  }
}
In this article