Tempis Timeline | Canvas timeline and Gantt library for JavaScript

Built for large datasets

Canvas rendering with virtual scrolling means only visible items are drawn. Load thousands of items and pan through them smoothly.

Animated focus

Smoothly navigate to any item, date, or range with configurable easing and duration. Click the buttons to see it in action.

Pluggable date adapters

Use the built-in native date handling, or bring your own. Luxon, Day.js, date-fns, whatever your stack uses. Full control over formatting and timezone handling.

Fully responsive

The timeline resizes with whatever contains it. Open a sidebar, collapse a panel or go fullscreen, and it redraws to fit straight away.

Perfect for live data

Stream events in real time and the timeline keeps up. New data appears instantly with smooth animated transitions, no flicker, no jank.

Dependencies and Gantt-style scheduling

Define source and target item relationships and the timeline draws the connector arrows automatically, so finish-to-start schedules read like a Gantt chart.

Export to image

One call and you've got a PNG, JPEG, or WebP. Control the pixel ratio for crisp retina output.

What else is in the box

Quite a lot, and it's all built in. No plugins to hunt down or wire up.

Touch and gestures

Pointer events throughout, so drag-to-pan and pinch-to-zoom work the same on a trackpad, a mouse and a phone.

Categories and legend

Group items by category for shared styling. The legend filters on click and highlights on hover, both switchable.

Minimap

An overview bar showing every item with the current viewport marked. Click or drag it to move the visible range.

Right to left

Flip the whole timeline right to left for Arabic, Hebrew and other RTL layouts.

Custom tooltips

Replace the default hover tooltip with your own layout, and control when and whether it shows.

Bands

Shade a stretch of time behind the items to mark shift patterns, maintenance windows or deadlines.

Keyboard and ARIA

Pan and zoom from the keyboard, label it for screen readers, and it eases off animation when a visitor prefers less motion.

Typed end to end

Written in TypeScript, so your editor autocompletes options and catches mistakes as you type.

Stacking and grouping

Overlapping items stack into tidy rows on their own, and groups can be sorted and collapsed.

Light and zero-dependency

Under 18 kB minified and gzipped, with no runtime dependencies to pull in or keep up to date.

Canvas rendering

The whole timeline is one canvas element, not thousands of DOM nodes, so it stays smooth with large datasets.

Selection

Single or multi-select items, controlled by you or managed for you, with click and keyboard both wired up.

Per-item styling

Override any item's colour, border, dash pattern, corner radius and padding to encode status at a glance.

Progress bars

Show completion as a fill inside a range item, clipped to its corners, for a Gantt-style view of how far along work is.

Range limits

Pin the earliest and latest navigable dates and set minimum and maximum zoom, so users can only pan and zoom where it makes sense.

A simple, flexible timeline forthe web, React, Vue, reporting, dashboards, planning, scheduling and SSR.