Charts

Shadcn-styled line/area charts you can drop in a README, docs site, or anywhere an image works — plain SVG, no JavaScript, no iframe. Four kinds: GitHub star history (like starcharts), GitHub issues over time, npm downloads, and arbitrary JSON.

Builder

Pick a chart kind, tweak the styling, and copy the URL or markdown.

URL format

/chart/github/stars/{owner}/{repo}.svg     → GitHub star history
/chart/github/issues/{owner}/{repo}.svg    → GitHub issues over time
/chart/npm/{package}.svg                    → npm weekly downloads
/chart/json.svg?values=1,2,3                → inline JSON data
/chart/json.svg?url=...&query=...           → remote JSON data

Every endpoint also serves .png and .json (the raw time series).

Use it in markdown:

![Star History](https://shieldcn.dev/chart/github/stars/vercel/next.js.svg)

Or as a clickable image linking back to the repo:

[![Star History](https://shieldcn.dev/chart/github/stars/vercel/next.js.svg)](https://github.com/vercel/next.js)

GitHub stars

GitHub issues over time

Cumulative issues opened, sampled from the GitHub search API (pull requests excluded).

/chart/github/issues/{owner}/{repo}.svg

npm downloads

Weekly download buckets over the last year (configurable with ?days=).

/chart/npm/{package}.svg
/chart/npm/@scope/{package}.svg

Your own data (JSON)

Bring numbers inline with ?values= (comma-separated). Add ?dates= for a time axis or ?labels= for category ticks — omit both and points are spaced evenly and labelled 1, 2, 3, ….

/chart/json.svg?values=120,180,150,210,260&title=Latency&label=ms
/chart/json.svg?values=10,20,30&dates=2024-01-01,2024-02-01,2024-03-01

Or pull from a remote endpoint with JSONPath, exactly like the dynamic JSON badge. query selects the value array; optional dateQuery selects a parallel date array.

/chart/json.svg?url=https://api.example.com/metrics.json&query=$.points[*].count&dateQuery=$.points[*].date

Query parameters

Param	Values	Default	Description
mode	dark, light	dark	Surface and text colors
theme	blue, green, rose, orange, violet, purple, cyan, emerald, …	—	Accent color from the shadcn palette
color	hex (no #)	3b82f6	Line + end-dot color (wins over theme)
fill	hex (no #)	line color	Area fill color, independent of the line
area	true, false	true	Show the gradient area fill under the line
bg / background	transparent, hex	mode surface	Card background
border	true, false	true	Draw the rounded card border
font	inter, geist, geist-mono, jetbrains-mono, fira-code, roboto, space-grotesk	inter	Font-family stack (same keywords as badges)
logo	false	shown	Show/hide the shieldcn corner watermark
logoColor	hex (no #)	muted	Watermark color
icon	SimpleIcons slug, ri:Name, false	auto (github/npm)	Icon left of the title
iconColor	hex (no #)	title color	Title icon color
yScale	linear, log	linear	Y-axis scale type
yMin	number	0 (auto)	Force the y-axis minimum
yMax	number	auto	Force the y-axis maximum
yTicks	1–10	4	Number of y-axis gridline intervals
xTicks	2–12	3	Number of x-axis labels
width	200–2000	800	Chart width in px
height	120–1200	400	Chart height in px
title	string	per kind	Override the chart title
days	30–540	365	npm download window
values	comma numbers	—	Inline JSON data points
dates	comma dates	—	Inline JSON x-axis dates
labels	comma strings	—	Inline JSON x-axis labels
url + query	URL + JSONPath	—	Remote JSON data source

Note — font only swaps the family stack. Charts are raw SVG (needed for the line paths), and a sandboxed <img> SVG can't load embedded fonts — so the rendered typeface depends on what's available to the viewer.

How star history works

GitHub has no "stars over time" API. shieldcn reconstructs the curve from the stargazers endpoint, which (with the star+json media type) returns a starred_at timestamp per stargazer:

• Small / medium repos — every page is fetched and the full list is sampled down to ~30 points for an exact curve.
• Large repos — pages are sampled evenly and the first stargazer of each is read, then the curve is anchored to the live star count, exactly like starcharts.

Requests are distributed across the donated token pool and cached with a 6-hour fresh window plus a 30-day last-known-good fallback, so a transient rate limit never collapses the chart.

Data sources

Chart	Source	Cache
Stars	GitHub Stargazers API	6h fresh · 30d last-known-good
Issues	GitHub Search API (type:issue)	6h fresh · 30d last-known-good
npm	npm downloads API	1h
JSON	inline, or your url	5m (remote)

GitHub requests are distributed across the donated token pool and serve a last-known-good copy if the upstream is briefly unavailable.