When to use the line graph maker
A line graph is the best way to show how a value changes over an ordered sequence, usually time: monthly visitors, daily temperatures, weekly sales or response times per release. The slope of the line makes trends, seasonality and sudden changes visible at a glance, and several lines on the same axes make comparisons easy. This line graph maker turns a table of numbers into such a chart in seconds.
Data formats the chart maker accepts
Paste data, or open a CSV, TSV, TXT or JSON file. The first column holds the labels and every further column is a data series. A header row is detected automatically and used for series names; commas, tabs, semicolons and pipes all work as separators, and values such as $1,200 or 45% are read as numbers. In comma-separated data a thousands comma would split the cell in two, so quote such a value ("$1,200") or separate the columns with tabs, semicolons or pipes; with semicolons, a decimal comma such as 1,5 is understood as well.
Month,Visitors,Signups
Jan,4200,310
Feb,4800,350
Mar,5100,420
Apr,4700,390
May,5900,510JSON works too, in any of these shapes:
[{"month": "Jan", "visitors": 4200}, {"month": "Feb", "visitors": 4800}]
[["Jan", 4200], ["Feb", 4800]]
{"Jan": 4200, "Feb": 4800}
{"labels": ["Jan", "Feb"], "datasets": [{"label": "Visitors", "data": [4200, 4800]}]}The last form is the Chart.js data structure, so data from an existing Chart.js configuration can be pasted as is. Lines starting with # or // are ignored as comments.
Options explained
- Title and axis labels – describe what is measured and in which unit, for example "Revenue (USD)".
- Colors – a comma-separated list of CSS colors such as
#2563eb, #f59e0b, teal. They are applied to the series in order; leave the field empty for the built-in palette, which is designed to keep neighboring colors distinguishable. - Width and height – the size of the SVG in pixels (240–4000 wide, 180–4000 high).
- Legend – show or hide the list of series names.
- Begin at zero – forces the y-axis to start at 0. Leave it off to zoom into the range of your data, which reveals small changes; turn it on when the absolute size matters, so modest changes are not exaggerated.
- Smooth – draws curved lines through the points instead of straight segments. Smoothing looks friendly but can suggest values between points that were never measured, so use it with care for sparse data.
- Show points – marks every data point with a dot, useful when there are few points or when exact positions matter.
Missing values
Leave a cell empty when a value is missing. The line is interrupted at that point instead of dropping to zero, which would misrepresent the data. Axis ticks are chosen automatically at "nice" round numbers.
Tips for clear line graphs
- Limit the chart to a handful of series; beyond five or six lines, readers struggle to follow them.
- Keep labels short. Long category labels are rotated or thinned out automatically when they would overlap.
- Use a line graph only when the x-axis has a natural order. For unrelated categories such as products or countries, a bar graph is the better choice.
- To emphasize the volume under a line, or totals over time, try the area chart maker.
Export as SVG
The chart is a standalone SVG file. SVG is a vector format, so it stays perfectly sharp at any zoom level and in print, and it can be embedded directly in web pages, opened in Illustrator, Inkscape or Figma for further styling, and inserted into recent versions of Word, PowerPoint and Google Slides. Hovering over data points in the preview shows exact values, and these tooltips remain in the downloaded file when it is opened in a browser. If a platform only accepts PNG or JPG, open the SVG in a browser or an editor and export or screenshot it at the size you need.
Have your data in a spreadsheet? Export it as CSV, or view and clean it first in the CSV viewer. Charts are drawn as SVG by JavaScript in your browser without any chart library or server; your data is never uploaded.