History timeline jQuery plugin

Usage no npm install needed!

<script type="module">
  import jqueryTimeline from 'https://cdn.skypack.dev/jquery-timeline';


History Timeline jQuery Plugin



npm install jquery-timeline


bower install jquery-timeline



Create a div container

<div id="timeline"><div>

Initialize the Timeline

    // options
}); // Returns a jQuery object


    container: $("#timeline")
    // more options
}); // Returns Timeline object

OR even

new JQueryTimeline.Timeline({
    container: $("#timeline")
    // more options
}); // Returns Timeline object


You can either do it through jQuery selector

$("#timeline").timeline("addLine", {color: "indigo"});

or by calling methods of Timeline object

timeline.addLine({color: "indigo"});



  • container: JQuery [optional]
  • zoom: number [optional] — zoom level, default: 100
  • scale: number [optional] — horizontal chart scale, default: 1
  • minorSections: number [optional] — number of minor sections, default: 5
  • lines: Array<LineOptions> [optional]
  • events: Array<EventOptions> [optional]


Zoom is a floating point number in range 0 < zoom <= (1000 / minorSections). It defines a size of guide line major section in years.

For example, for zoom=100, will result in 1000 / 100 = 10 years in each major section. (Here 1000 is a zoom base constant)


Line is a group of events

  • color: string [optional] — any CSS compatible color value like red or #FF0000
  • events: Array<EventOptions> [optional]


Event is a history event, which could be either a single event or a date range

  • label: string — event short label (shown on timeline)
  • start: string — a date when an event had happened or started, allowed formats: YYYY, MM-YYYY, DD-MM-YYYY, BC dates should be prefixed with "-", e.g "-372", or "-01-07-372"
  • length: number [optional] — event length in years
  • end: string [optional] — a date when an event ended, allowed formats: YYYY, MM-YYYY, DD-MM-YYYY
  • color: string [optional] — any CSS compatible color value like red or #FF0000, overwrites color defined in line options, default: gray
  • name: string [optional] — event full name (shown in the tooltip)
  • description: string [optional] — event detailed description (shown in the tooltip)

Only one of length or end options required. If both provided length has higher priority.

Event Types

single event is an event which had happened on a single date or ended withing the same year.


  • addLine(LineOptions): JQuery
  • addEvent(EventOptions): JQuery — adds event to the last line
  • addEvent(EventOptions, line: number): JQuery — adds event to the line with index line
  • scrollTo(year: number) — scrolls timeline to specifie year


Released under the MIT license.