Area chart generator
Shows the same data as a line chart with a fill under the series - good for cumulative metrics or emphasizing volume over time.
Chart builder
Adjust fields and copy URL, HTML, Markdown, or an AI prompt. See the [URL parameters](/docs/url-parameters) reference if you are editing links by hand.
area
Preview
Copy
Show snippets
When to pick area instead of line
Area charts read well when the shaded region reinforces the story (runway, throughput, stacked feel with a single series). ChartKit uses `type=area` with the same `labels` and `s0` pattern as line charts.
Use the line chart generator when you only need the stroke. Use the general chart maker if you switch types often.
Use cases
- Product or infra metrics over weeks where the fill makes the trend easier to scan in a slide.
- A blog post that already uses line charts elsewhere and needs one variant with emphasis under the curve.
- Exporting SVG for documentation that prints in grayscale - the fill gives extra contrast next to gridlines.
Examples
Single series area (SVG)
https://getchartkit.com/api/chart?type=area&labels=W1,W2,W3,W4,W5,W6&s0=120,132,128,141,155,162&s0name=Active+orgs&title=Rollout&w=720&h=400&valueFormat=compact&format=svgArea with currency formatting
https://getchartkit.com/api/chart?type=area&labels=Jan,Feb,Mar,Apr&s0=42000,45800,50200,53900&s0name=MRR&title=Monthly+MRR&valueFormat=currency&w=700&h=420&format=svgPNG for email-friendly width
https://getchartkit.com/api/chart?type=area&labels=Q1,Q2,Q3,Q4&s0=88,92,95,101&s0name=Score&title=Quality+score&format=png&w=640&h=380How it works
- This page sets `type=area`. Your labels define the horizontal order; `s0` lists values in that same order.
- Optional second series (`s1`) follows the bar/line rules if you need two areas - check the preview for readability.
- Copy SVG for sharp docs or PNG when your channel strips SVG.
Use with ChatGPT or Claude
Ask ChatGPT or Claude for `type=area` explicitly so the model does not default to bars.
The URL parameters page lists every key; paste it once into a project instruction block.
FAQ
- Is the area chart generator free to use?
You can build URLs from this page on the public site. Heavy automation should follow current rate limits and terms.
- Can I embed the chart in HTML?
Yes. The chart URL works as the `src` of an `<img>` tag.
- Can I use this in Markdown?
Yes. Use the Markdown image syntax with your chart URL.
- Does this need JavaScript on my reader’s page?
No. The response is an image at a URL.
- How is this different from the line generator?
Same parameters except `type=area`; ChartKit fills the region under the line.