Timeline maker — dated events on a horizontal or vertical line

How to use the timeline maker

1. In Events, type one event per line: date, title and an optional description, separated by commas, for example 2026-05-18, Launch, Public release and press announcement.
2. Add a Chart title.
3. Choose a Layout (Horizontal or Vertical) and a Spacing (Even or By date).
4. Keep Sort by date ticked to put events in time order, or untick it to keep your own order.
5. Pick a Colour theme, Background and Width, then copy the SVG or download timeline.svg. The Events table lists the events in the order drawn.

What it does and when to use it

A timeline tells a story in order: a product roadmap, a company history or the key dates in a history lesson. Each event is a marker on a line with its date, a bold title and a short note.

It is for moments, not durations. If each step has a start and an end, the Gantt chart maker shows how long things take and where they overlap. For the people behind a project, the org chart maker uses the same simple typed-list style.

How it works

Each line is split on commas (or tabs). The first part is read as a date and converted to a day number in UTC, so the result does not depend on your time zone. A month counts as its first day, and a year as 1 January. Sorting is stable: two events on the same date keep the order you typed.

In the horizontal layout, labels alternate above and below the line so neighbours do not collide, and descriptions wrap to at most three lines. With By date spacing, an event’s position is its share of the time between the first and last dates. The vertical layout puts dates on the left of a vertical line and titles with notes on the right. The SVG <desc> lists every event for screen readers, and everything is drawn in your browser.

Worked examples

Product roadmap (the sample). Five events from Kick-off on 2026-01-12 to Review on 2026-07-01, evenly spaced on a horizontal line. The table row for the fourth reads:

4 | 2026-05-18 | Launch | Public release and press announcement

Typed out of order. Moon landing (1969-07-20) and then Sputnik 1 (1957-10-04), vertical layout. Sorting puts Sputnik first: 1 | 1957-10-04 | Sputnik 1.

A loose date. “March 2026”, “2026-05-02” and “soon” with By date spacing. “soon” is not a date, so the tool keeps the typed order, spaces the events evenly and says so. The Launch description “Live for all users, with support” keeps its comma.

Limits and tips

• Keep titles short; long titles and notes are cut with “…” to fit the label width.
• If the horizontal layout warns that events are close together, widen the chart or switch to vertical.
• For a PNG, use the SVG to PNG converter.