@absoluteui/angular/chart-export

Export charts as SVG or PNG files.

import { chartToSvg, chartToPng, downloadChart } from '@absoluteui/angular/chart-export';

Example

import { Component } from '@angular/core';
import { AuiBarChart } from '@absoluteui/angular/bar-chart';
import { downloadChart } from '@absoluteui/angular/chart-export';
import { AuiButton } from '@absoluteui/angular/button';
import type { ChartSeries } from '@absoluteui/components/bar-chart';

@Component({
  selector: 'app-tickets',
  imports: [AuiBarChart, AuiButton],
  template: `
    <aui-bar-chart #chart="auiBarChart" label="Tickets" [categories]="regions" [series]="series"></aui-bar-chart>
    <button type="button" auiButton (click)="save(chart)">Download chart as SVG</button>
  `,
})
export class TicketsComponent {
  readonly regions = ['North', 'South'];
  readonly series: ChartSeries[] = [{ id: 'open', label: 'Open', values: [3, 5] }];

  save(chart: AuiBarChart): void {
    void downloadChart(chart, { format: 'svg', fileName: 'tickets' });
  }
}

Functions, constants, and types

Chart export

Functions

chartToPng

PNG image of the chart.

function chartToPng<C extends ExportableChart & Controller<O>, O>(chart: ComponentBridge<C, O>, options?: ChartExportOptions): Promise<Blob | null>;

chartToSvg

Standalone SVG markup of the chart (computed paint and text styles inlined).

function chartToSvg<C extends ExportableChart & Controller<O>, O>(chart: ComponentBridge<C, O>, options?: ChartExportOptions): string | null;

downloadChart

Download the chart as SVG or PNG.

function downloadChart<C extends ExportableChart & Controller<O>, O>(chart: ComponentBridge<C, O>, options: ChartDownloadOptions): Promise<void>;

Related types

Interfaces

ChartDownloadOptions

interface ChartDownloadOptions extends ChartExportOptions {
  format: ChartExportFormat;
  fileName: string;
}

ChartExportOptions

interface ChartExportOptions {
  title?: boolean;
  legend?: boolean;
  background?: 'surface' | 'transparent';
  scale?: number;
}

Types

ChartExportFormat

type ChartExportFormat = 'svg' | 'png';