CodesBeautify

Line Graph Maker

Chart one or more numeric columns against a shared time axis and export the line or area graph as SVG.

Data (CSV or JSON)
Line graph
Runs locally in your browser

About the Line Graph Maker

The left-hand column sets the position along the horizontal axis, usually a month, week, date or step number, and every numeric column to its right is drawn as its own line in the palette order. Two columns give one line, four give three, and the legend above the plot names each of them from the header row. Where a cell is blank or holds NA the line breaks rather than dropping to zero, which keeps a gap in reporting from looking like a crash in the metric.

The vertical axis is fitted to the data instead of being forced to start at zero, so a series that moves between 1,240 and 2,041 fills the plot rather than hugging the top. Ticking Fill area pulls the baseline back down to zero and shades the region under each line at low opacity, which is the right shape for cumulative totals and stacked-looking volume charts. Smooth mode replaces the straight segments with a Catmull-Rom curve that passes through every point, so no value is invented between readings. When the axis has more labels than will fit, only every nth one is printed and the last one is always kept.

Nothing leaves the page: parsing and drawing happen in JavaScript on your machine, which matters for revenue or headcount data. For a snapshot comparison across categories rather than a trend, the Bar Graph Maker is a better fit, and paired measurements belong on the Scatter Plot Maker.

How to use

  1. Paste rows shaped as period, value, adding one column per series you want plotted.
  2. Pick Straight or Smooth and tick Fill area if you want the region under the line shaded.
  3. Use empty cells for missing readings so the line shows a gap instead of a false zero.
  4. Download the SVG or copy the markup straight into your page.

Common questions

How do I plot several lines at once?
Give each series its own column after the label column and name it in the header row. Every column becomes a line with its own colour and legend entry.
Why does the axis not start at zero?
Line graphs show change, so the scale is fitted to the values to keep the movement visible. Tick Fill area if you want the baseline pinned to zero.
Can I make an area chart here?
Yes, Fill area shades under each line and gives you a standard area chart in the same download.
What happens to gaps in my data?
Blank cells and values like NA or null are treated as missing and the line is broken at that point.