Line Chart Generator

Paste your data, pick one color and mode, toggle grid, points, area fill and a smooth curve — then export a clean SVG. Everything runs in your browser.

What is the Line Chart Generator?

The gui.farm Line Chart Generator is a free, browser-based tool for turning a small set of numbers into a clean line chart. Paste your labels and values, choose one color and a light or dark mode, and export a crisp SVG — ready for slides, docs, dashboards, websites or app mockups.

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 a line 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 line, points and area fill adapt together.
  3. Tune it. Toggle the grid, data points, area fill, and switch between a smooth curve and straight segments.
  4. Export SVG. Download the chart or copy its SVG markup to paste anywhere.

Frequently asked

Is the Line 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.
How do I enter my data?
Type one "label value" pair per line, e.g. "Jan 32". The chart redraws live as you edit.
Can I change the color?
Yes. Pick any color from the gui.farm palette or enter a custom hex; the line, points and area fill follow it.

Good for

  • Dashboard and analytics UI mockups
  • Trends over time — revenue, users, metrics
  • Slides, reports and case studies
  • Website and app interface designs
  • .gui interface files for humans and AI agents
For AI agents

Generate a line chart from a single URL

Describe the chart with readable params — data, line, surface, width — 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/line-chart.svg?data=Jan:32,Feb:41,Mar:38&line=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/line-chart.svg?data=Jan:32,Feb:41,Mar:38,Apr:55,May:61,Jun:72&line=coral
  • Quarterly, on a dark surface
    Quarterly, on a dark surface https://gui.farm/tools/charts/line-chart.svg?data=Q1:120,Q2:150,Q3:135,Q4:180&line=teal&surface=dark
  • Minimal — no labels, no grid
    Minimal — no labels, no grid https://gui.farm/tools/charts/line-chart.svg?data=10,14,12,20,18,26,24,30&line=violet&xlabels=hide&ylabels=hide&grid=hide
  • Straight, no area fill
    Straight, no area fill https://gui.farm/tools/charts/line-chart.svg?data=Mon:8,Tue:12,Wed:9,Thu:15,Fri:11&line=blue&curve=straight&area=off

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/line-chart.svg?data=Jan:32,Feb:41,Mar:38,Apr:55,May:61,Jun:72&line=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

Line 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
linea color name (blue, coral, …) or hexblueLine, points and area-fill 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.

Elements

ParamAcceptsDefaultNotes
gridshow, hideshowHorizontal gridlines.
pointsshow, hideshowDots at each data point.
areaon, offonGradient area fill under the line.
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. At tiny (sparkline) sizes, hide labels and grid.
heightpixels (50–2000)440Output height, and the drawing box.