Components
Blocks
- Gift Certificate
- Event Agenda
- Event Ticket
- 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/takumi/graphUsage
import { Component } from "@angular/core";
import { PdfGraph } from "@/components/pdf/graph/graph";
import { PdfcnThemeProvider } from "@/components/pdf/theme-provider";
import {
TakumiDocument,
TakumiPage,
} from "@/lib/pdf-primitives";
@Component({
imports: [TakumiDocument, TakumiPage, PdfcnThemeProvider, PdfGraph],
template: `
<takumi-document>
<takumi-page size="A4">
<pdf-theme-provider>
<pdf-graph
variant="bar"
title="Monthly Revenue"
subtitle="FY 2025"
[data]="data"
showValues
[width]="480"
[height]="260"
/>
</pdf-theme-provider>
</takumi-page>
</takumi-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 |
- |