Components
Blocks
- Event Agenda
- Event Ticket
- Gift Certificate
- Invoice Classic
- Invoice Consultant
- Invoice Corporate
- Invoice Creative
- Invoice Minimal
- Invoice Modern
- Lesson Plan
- Medical Intake Form
- Meeting Minutes
- Packing Slip
- Press Release
- Report Financial
- Report Marketing
- Report Operations
- Report Security
- Shipping Label
- Work Order
Rendering PDF…
Installation
$ pnpm dlx shadcn@latest add @angular-pdfcn/forme/graphUsage
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 |
- |