Graph

Bar, line, and area charts drawn with SVG.

Installation


$ pnpm dlx shadcn@latest add @pdfcn/takumi/graph

import { PdfGraph } from "@/components/pdf/graph";

<PdfGraph variant="bar" data={[{ label: "Q1", value: 30 }]} />

<PdfGraph variant="line" data={series} showDots smooth />
<PdfGraph variant="donut" data={totals} centerLabel="$48k" />

Prop	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`	-

On This Page