Area Chart Generator

Paste your data, pick one color and mode, choose a gradient or solid fill and a smooth curve — then export a clean SVG. Everything runs in your browser.

What is the Area Chart Generator?

The gui.farm Area Chart Generator is a free, browser-based tool for turning a small set of numbers into a clean area chart — a line with the region beneath it filled to emphasise volume and trend. Paste your labels and values, choose one color and a light or dark mode, and export a crisp SVG.

There's no account, no API key and no billing. The chart is drawn as a self-contained SVG in your browser, so it stays sharp at any size and drops straight into a .gui interface file.

Browse all free tools →

How to make an area chart

  1. Paste your data. One label value pair per line, like Jan 32. The chart redraws as you type.
  2. Style it. Pick one color and a light or dark mode; the fill and line adapt together.
  3. Tune it. Choose a gradient or solid fill, a smooth or straight edge, and toggle the grid and data points.
  4. Export SVG. Download the chart or copy its SVG markup to paste anywhere.

Frequently asked

Is the Area Chart Generator really free?
Yes. It's free to use with no account, no API key and no watermark.
What format does it export?
A clean, self-contained SVG — sharp at any size and easy to drop into slides, docs, websites or .gui interface files.
Gradient or solid fill?
Both. Gradient fades from the top edge to transparent; Solid is a flat tint.
How do I enter my data?
Type one "label value" pair per line, e.g. "Jan 32". The chart redraws live as you edit.

Good for

  • Dashboard and analytics UI mockups
  • Volume and trend over time — revenue, traffic, usage
  • Slides, reports and case studies
  • Website and app interface designs
  • .gui interface files for humans and AI agents
For AI agents

Generate an area chart from a single URL

Describe the chart with readable params — data, area, fill, surface — and the endpoint returns an SVG from that intent. No key, no SDK, no client library: it is one GET. The browser editor and agent-authored URLs share the same renderer, so what you see below is exactly what ships.

GET https://gui.farm/tools/charts/area-chart.svg?data=Jan:32,Feb:41,Mar:38&area=coral

Data is label:value pairs (label optional — data=10,20,30 works, with an optional labels= list). Colors accept a named color or a hex value. The SVG is always transparent — surface only picks label/grid contrast for wherever you place it; hide both label sets for an edge-to-edge fill. Open the same URL without .svg to edit the chart in the browser.

Live examples

Each preview is rendered by the endpoint from the URL beneath it.

  • Revenue trend, coral
    Revenue trend, coral https://gui.farm/tools/charts/area-chart.svg?data=Jan:32,Feb:41,Mar:38,Apr:55,May:61,Jun:72&area=coral
  • Solid fill, on a dark surface
    Solid fill, on a dark surface https://gui.farm/tools/charts/area-chart.svg?data=Q1:120,Q2:150,Q3:135,Q4:180&area=teal&fill=solid&surface=dark
  • Straight edge, no grid
    Straight edge, no grid https://gui.farm/tools/charts/area-chart.svg?data=Mon:8,Tue:12,Wed:9,Thu:15,Fri:11&area=violet&curve=straight&grid=hide
  • Minimal — no labels
    Minimal — no labels https://gui.farm/tools/charts/area-chart.svg?data=10,14,12,20,18,26,24,30&area=blue&xlabels=hide&ylabels=hide

Drop it into a .gui file

Because the endpoint is a stable image URL, a .gui screen embeds a chart as a plain <img> — nothing to download or unzip. The chart stays live text an agent can read and edit.

<gui version="0.2" name="Monthly revenue">
  <col w="360" p="20" gap="14" fill="#ffffff" radius="24">
    <text value="Monthly revenue" font-size="19" font-weight="700" color="#111827" />
    <img src="https://gui.farm/tools/charts/area-chart.svg?data=Jan:32,Feb:41,Mar:38,Apr:55,May:61,Jun:72&area=teal&width=640&height=360" w="320" h="180" radius="16" />
    <text value="Up 18% since January" font-size="14" color="#6b7280" />
  </col>
</gui>

Monthly revenue

Area Chart Generator embedded in a .gui screen

Up 18% since January

Rendered .gui screen

Data

ParamAcceptsDefaultNotes
dataLabel:value pairs, comma-separated (label optional)—The series to plot. Each item is label:value; value-only items are allowed.
labelscomma-separated text—Optional x-axis labels for value-only data.

Appearance

ParamAcceptsDefaultNotes
areaa color name (blue, coral, …) or hexblueFill and line color. `color` is an alias.
surfacelight, darklightTone the chart will sit on — sets label and gridline contrast only. The background is never painted; the SVG is transparent.
curvesmooth, straightsmoothLine interpolation along the top edge.
fillgradient, solidgradientSoft top-down gradient, or a flat tint.

Elements

ParamAcceptsDefaultNotes
gridshow, hideshowHorizontal gridlines.
pointsshow, hidehideDots at each data point.
xlabelsshow, hideshowX-axis (bottom) labels. Hiding both label sets makes the chart fully edge-to-edge.
ylabelsshow, hideshowY-axis (left) value labels.

Size

ParamAcceptsDefaultNotes
widthpixels (50–2000)720Output width, and the drawing box — the plot reflows to it.
heightpixels (50–2000)440Output height, and the drawing box.