OneTaskBy Tim King · Updated
Timeline Maker
Paste Dates and Events, Download SVG or PNG Free
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Timeline Maker works
This timeline maker draws the chart from plain rows. A timeline shows when things happened in order along a line, which is the quickest way to explain a company history, a project plan, a legal sequence or a lesson on a period. Drawing one by hand means measuring the gaps. Here you paste rows of date and event, and the page spaces the events to scale, staggers the labels so they do not collide, colours them by an optional group column and lets you download SVG or PNG. Nothing is uploaded.
Writing rows for the timeline maker
The first line is a header and every line after it is one event: a date, a comma, the event name. Dates can be written as 2021-09-05, 5 Sep 2021, September 5 2021 or a bare year such as 1969. A third column is optional and names a group, such as Product or Team; events in the same group share a colour and a legend is drawn above the chart. Rows are sorted by date, so the order you paste them in does not matter. Tabs are accepted in place of commas, so a two-column range copied from a spreadsheet pastes straight in.
Horizontal layout
Events sit on a line scaled to time, so a long gap looks long and a cluster looks tight. Labels alternate above and below the line, and when two labels on the same side would overlap the later one is raised a level, with a stem showing which dot it belongs to. The date is printed under each event in a smaller size; choose Month and year when the day is not important, or when the dates are only years the axis and labels switch to years automatically.
Vertical layout
The vertical layout ignores the scale and lists every event evenly down the page, dates on the left and names on the right. It suits a long list of events with uneven gaps, a phone-width page, or a sequence where the order matters more than the time between steps. The drawing grows taller with the number of events.
Reading and tweaking
Hovering a dot shows the full date, name and group, which is kept in the SVG. If horizontal labels stack too high, shorten the names or split the rows across two timelines; the chart never drops a label, so a busy period is always readable at the cost of height. The stats show the count, first and last dates and the span in days or years.
Exporting
Download SVG gives a vector file with the labels as editable text, ready for Inkscape, Illustrator or Figma. Download PNG renders at one, two or three times the preview width. Copy SVG puts the markup on the clipboard. Everything is drawn in your browser; the rows never leave your machine.
FAQ
Which date formats work?
ISO dates like 2021-09-05, written forms like 5 Sep 2021 or September 5, 2021, and plain years like 1969 or 2024. When every row is a bare year, the axis shows years only. Mixed formats are fine as long as each one is unambiguous; a date the browser cannot read is reported with its line number.
How do I colour events?
Add a third column with a group name for each row. Each distinct group gets a colour from the palette and a legend appears above the chart. Leave the column out, or blank on some rows, and those events use the first palette colour.
Can I make the timeline longer?
The horizontal layout fills the preview width; widen the window or download the SVG, which scales without loss. The vertical layout grows with the number of rows, so it is the better choice for a timeline with dozens of events.
Why are some labels higher than others?
Two events close together would print on top of each other, so the second is lifted a level and a stem joins it to its dot. Switching the date labels to Month and year or shortening names makes the labels narrower so fewer need lifting.
See also: all Chart Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Bar Chart Maker
Paste CSV, get a grouped or stacked bar chart; download SVG or PNG.
Line Chart Maker
Paste CSV, get a multi-series line graph; download SVG or PNG.
Flowchart Maker
Type step -> step lines and download a flowchart as SVG or PNG.
Date Difference Calculator
Days, weeks and months between any two dates.
SVG To PNG
Rasterise an SVG to a PNG at any width.