data list required Comma-separated numeric series to plot: 2–100 values, decimals and negatives allowed. Any non-numeric item is a 400 naming the item.
example: data=1,4,2,8
SVG Sparkline & Chart Placeholder API
MOCK DATASparkline SVGs straight from a URL — plot 2–100 numbers as a line, area or bar chart with custom size, color and smoothing. No chart library needed.
Generated test data for fixtures and development
- Base URL
- /api/charts
- Category
- Design & Media
- Capabilities
- 1 route
- Last updated
- July 29, 2026
GET /api/charts/sparkline
Returns the chart itself (image/svg+xml), not JSON. The series is normalized into the canvas with 8% padding; line/area can be smoothed, bars are zero-based.
Route reference
Code samples Ready-to-copy requests in 4 languages
Parameters Route-specific request inputs 6
| Parameter | Type | Default & allowed | Description |
|---|---|---|---|
data
required
| list | example: 1,4,2,8 | Comma-separated numeric series to plot: 2–100 values, decimals and negatives allowed. Any non-numeric item is a 400 naming the item. |
type | enum | default: line allowed: line | area | bar example: area | Chart style: 'line' = stroked polyline, 'area' = line plus 18%-opacity fill to the baseline, 'bar' = one rect per value growing from the zero line. |
width | int | default: 300 allowed: 60 – 1200 example: 400 | Image width in pixels (60–1200). |
height | int | default: 80 allowed: 24 – 400 example: 120 | Image height in pixels (24–400). |
color | string | default: b4540a example: 0ea5e9 | Stroke/fill color as exactly 6 hex digits without '#' (e.g. 0ea5e9). Anything else is a 400. Default b4540a (copper). |
smooth | boolean | default: false example: true | Draw line/area with quadratic curves through segment midpoints instead of straight segments. Ignored for type=bar. |
type enum Chart style: 'line' = stroked polyline, 'area' = line plus 18%-opacity fill to the baseline, 'bar' = one rect per value growing from the zero line.
default: line
allowed: line | area | bar
example: type=area
width int Image width in pixels (60–1200).
default: 300
allowed: 60 – 1200
example: width=400
height int Image height in pixels (24–400).
default: 80
allowed: 24 – 400
example: height=120
color string Stroke/fill color as exactly 6 hex digits without '#' (e.g. 0ea5e9). Anything else is a 400. Default b4540a (copper).
default: b4540a
example: color=0ea5e9
smooth boolean Draw line/area with quadratic curves through segment midpoints instead of straight segments. Ignored for type=bar.
default: false
example: smooth=true
Documented examples
Build-generated requests and complete responses 3 Line sparkline of a small series /api/charts/sparkline?data=1,4,2,8
Smoothed area chart /api/charts/sparkline?data=3,5,2,8,6,9&type=area&smooth=true
Bar chart with negatives on a zero baseline /api/charts/sparkline?data=4,-2,7,3,-1&type=bar&color=0ea5e9&width=400&height=120
About this API
Coverage & behavior
Turns a comma-separated series into a ready-to-embed SVG sparkline (Content-Type: image/svg+xml) — a real chart of your numbers, not a random squiggle. Use it in dashboards, mockups, READMEs or docs as a plain <img>. Note it is SVG only — the major email clients strip or ignore SVG <img> sources, so a sparkline will not render in HTML email.
data(required) — 2–100 comma-separated numbers; decimals and negatives welcome. A non-numeric item is a 400 that names the offending item, and fewer than 2 values is a 400 too.type— line (2 px stroke, round caps), area (the same line plus a fill at 18% opacity down to the baseline — zero when the series crosses it, otherwise the edge of the range) or bar (one rect per value with 2 px gaps; bar scales always include zero, so negative values drop below the zero baseline).smooth=truereplaces straight segments with quadratic curves through segment midpoints — line and area only, ignored for bars.width(60–1200),height(24–400) andcolor(exactly 6 hex digits without#, defaultb4540a) control the canvas.
Values are normalized into the canvas with 8% padding on every side; a flat series (all values equal) renders as a horizontal line centered vertically. The background is transparent, so the sparkline sits on any surface. The output is fully deterministic — the same URL returns a byte-identical SVG forever and is served with long cache headers, safe to hotlink.
Use it for
- Live-looking sparklines in dashboards, admin panels and mockups without pulling in a chart library
- Visualize a metric series in a README, wiki or docs page where JavaScript can't run
- Tiny trend indicators next to table rows — one <img> tag per series
Frequently asked questions
Can I chart my own numbers?
Yes — that's the point: pass data=3,7,4,9 (comma-separated) and the sparkline renders exactly those values, scaled to fit.
How do I embed a sparkline in HTML or Markdown?
Use the URL directly as an image source — it returns cacheable SVG sized by width and height.
Can I style the chart?
color takes a 6-digit hex value without the # (e.g. color=e08443), and smooth=true switches from straight segments to a curved path.
Related APIs
Placeholder Image API MOCK DATA
Hotlinkable SVG placeholder images at any size from 8 to 4000 px — custom label, colors and an optional gradient. Deterministic and crisp at every scale.
Random Number Generator API MOCK DATA
Random integers or floats in any range — control decimal precision, draw guaranteed-unique values, and pin a seed for reproducible sequences.
Random Color API MOCK DATA
Random colors in hex, RGB and HSL with hue and luminosity filters, nearest CSS color names and WCAG contrast text — plus deterministic color-scheme palettes.
Mock Time-Series Data API MOCK DATA
Generate compact mock metric series and standalone points with exact intervals, bounded values, coherent trends and deterministic timestamps.
Fake Analytics Session Data API MOCK DATA
Generate privacy-safe analytics sessions and funnel summaries with exact event order, timing, outcome, conversion and revenue arithmetic.