For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any docs URL. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0Sponsor

Graph

Bar, line, and area charts drawn with SVG.

Takumi Forme
Rendering PDF…

Installation

$ pnpm dlx shadcn@latest add @angular-pdfcn/forme/graph

Usage

import { Component } from "@angular/core";

import { PdfGraph } from "@/components/pdf/graph/graph";
import {
  FormeDocument,
  FormePage,
} from "@/lib/pdf-primitives";

@Component({
  imports: [FormeDocument, FormePage, PdfGraph],
  template: `
    <forme-document>
      <forme-page size="A4" [margin]="40">
        <pdf-graph
          variant="bar"
          title="Monthly Revenue"
          subtitle="FY 2025"
          [data]="data"
          showValues
          [width]="480"
          [height]="260"
        />
      </forme-page>
    </forme-document>
  `,
})
export class GraphDemo {
  protected readonly data = [
    { label: "Jan", value: 42_000 },
    { label: "Feb", value: 38_000 },
    { label: "Mar", value: 55_000 },
    { label: "Apr", value: 61_000 },
    { label: "May", value: 49_000 },
    { label: "Jun", value: 72_000 },
  ];
}

Variants

<pdf-graph variant="line" [data]="series" showDots smooth />
<pdf-graph variant="donut" [data]="totals" centerLabel="$48k" />

API Reference

PdfGraph

Input Type Default
variant 'bar' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' 'bar'
data GraphDataPoint[] | GraphSeries[] -
title string -
subtitle string -
xLabel string -
yLabel string -
width number 420
height number 260
fullWidth boolean false
colors string[] theme
showValues boolean false
showGrid boolean true
legend 'bottom' | 'right' | 'none' 'bottom'
centerLabel string -
showDots boolean true
smooth boolean false
yTicks number 5
noWrap boolean true
style Style -