Angular ChartsDownload

Version 14.2.0

Saving chart images by API call.

Download API Copy Link

We expose the APIs for triggering download via the AgCharts class:

download Function: Starts a browser-based image download for the given `AgChartInstance`. Returns a `Promise` that resolves once the download has been initiated.
getImageDataURL Function: Returns a base64-encoded image data URL for the given `AgChartInstance`.

The AgChartInstance can be obtained using an Angular @ViewChild decorator to reference our AgCharts tag, which exposes a chart property.

This example demonstrates:

How to obtain a reference to an AgChartInstance.
How to use AgChartInstance.download() to start a chart image download.
How to use AgChartInstance.getImageDataURL() to create a base64-encoded image URL, and then open it in a new tab.

app.component.ts

import { Component, ViewChild } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
  AgAreaSeriesOptions,
  AgChartOptions,
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

function buildSeries(name: string): AgAreaSeriesOptions {
  return {
    type: "area",
    xKey: "year",
    yKey: name.toLowerCase(),
    yName: name,
    fillOpacity: 0.5,
  };
}
ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<div class="example-controls">
    <div class="controls-row">
        <button (click)="download()">Download</button>
        <button (click)="downloadFixedSize()">Download at 600x300</button>
        <button (click)="openImage()">Open</button>
    </div>
</div>
<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  @ViewChild(AgCharts)
  public agCharts!: AgCharts;

  constructor() {
    this.options = {
      title: {
        text: "Browser Usage Statistics",
      },
      subtitle: {
        text: "2009-2019",
      },
      data: getData(),
      series: [
        buildSeries("IE"),
        buildSeries("Chrome"),
        buildSeries("Firefox"),
        buildSeries("Safari"),
      ],
      legend: { position: "top" },
    };
  }

  download = () => {
    this.agCharts.chart!.download();
  };

  downloadFixedSize = () => {
    this.agCharts.chart!.download({ width: 600, height: 300 });
  };

  openImage = () => {
    this.agCharts
      .chart!.getImageDataURL({ width: 600, height: 300 })
      .then((imageDataURL) => {
        const image = new Image();
        image.src = imageDataURL;
        const tab = window.open(imageDataURL);
        if (tab) {
          tab.document.write(image.outerHTML);
          tab.document.close();
        }
      });
  };
}