Development of Interactive Timelines for a Website

Imagine: on a company history page, events load in the wrong order—later ones first, earlier ones later, and some dates don't appear at all. In 80% of cases, this happens due to missing front-end sorting. The client sees chaos, not chronology. This is a common problem we solve with properly designed timelines: interactive, responsive, with clear data binding. Our engineers have worked with React for over 8 years and have tried dozens of approaches to find optimal ones. We help companies visualize project history, development stages, or news feeds—with guaranteed correct display on any device. If you are facing a similar issue, contact us for a consultation.

Problems We Solve

Non-deterministic Event Order

Often data arrives in random order, and the front-end doesn't sort it. We always apply a DataSet from vis-timeline or sort at the array level: events.sort((a,b) => a.date - b.date). Without this processing, the timeline shows nonsense even with 100 events.

Incorrect Scaling

If the timeline has no zoomMin and zoomMax constraints, users can zoom to micro or macro levels where data becomes meaningless. In vis-timeline, we set limits: minimum 1 day, maximum 1 year for project timelines. This maintains readability even with 10,000 events.

Lack of Responsiveness

Vertical timelines often break on mobile. We use CSS Flexbox and media queries, and for complex cases, the react-chrono library with its built-in mobile support. We test on resolutions from 320px to 1920px.

How We Do It: Stack and a Case from Our Practice

For one of our clients, we needed a timeline with drag-and-drop, grouping by teams, and integration with Jira tasks. We chose vis-timeline — a library with proven performance.

npm install vis-timeline vis-data 

We created a DataSet for items and groups, configured localization to Russian, set the range from -7 to +30 days from today—typical sprints. Importantly, we added a select handler so clicking an event opens the task card.

import { useEffect, useRef } from 'react'; import { Timeline, DataSet } from 'vis-timeline/standalone'; import 'vis-timeline/styles/vis-timeline-graph2d.css'; function ProjectTimeline({ events, groups }) { const containerRef = useRef<HTMLDivElement>(null); const timelineRef = useRef<Timeline>(); useEffect(() => { if (!containerRef.current) return; const items = new DataSet(events.map(e => ({ id: e.id, group: e.groupId, content: `<div class="timeline-item">${e.title}</div>`, start: e.startDate, end: e.endDate, className: `status-${e.status}` }))); const groupsDS = new DataSet(groups.map(g => ({ id: g.id, content: g.name }))); const timeline = new Timeline(containerRef.current, items, groupsDS, { start: new Date(Date.now() - 7 * 24 * 3600000), end: new Date(Date.now() + 30 * 24 * 3600000), height: '400px', locale: 'ru', groupOrder: 'id', zoomMin: 1000 * 60 * 60 * 24, // minimum 1 day zoomMax: 1000 * 60 * 60 * 24 * 365 // maximum 1 year }); timeline.on('select', ({ items: selectedIds }) => { if (selectedIds.length > 0) { const item = events.find(e => e.id === selectedIds[0]); onEventSelect(item); } }); timelineRef.current = timeline; return () => timeline.destroy(); }, []); return <div ref={containerRef} />; } 

Comparison of Timeline Libraries

vis-timeline handles up to 10,000 events without performance loss, whereas react-chrono starts lagging after 500—a 20x difference. A custom solution on Framer Motion has no such limits but requires 3 times more development time.

Which Library to Choose for a Timeline?

If you need an advanced timeline with grouping and scaling, use vis-timeline. If a beautiful vertical event feed suffices, use react-chrono. If you need a unique design and animations, go custom with Framer Motion. We can combine them: e.g., vis-timeline for the main timeline and react-chrono for a popup with details.

Why React Components Are Better Than Off-the-Shelf Plugins?

Off-the-shelf plugins (e.g., jQuery timelines) do not integrate with modern stacks: no typing, difficult to reuse, hard to test. React components: typed, declarative, easily embeddable in Next.js or Vite. We assemble a living UI from them that lives in the same runtime as the rest of the application. According to React documentation, component architecture isolates logic and simplifies maintenance.

Stages and Timeline of Work

Total time: from 2 to 10 days depending on complexity. Cost is calculated individually—contact us for an accurate estimate.

Work Process

1. Analysis — examine requirements: event types, date range, need for grouping, drag-and-drop.
2. Design — choose library, design components and props.
3. Implementation — write component in React/TypeScript, connect data, configure styles.
4. Testing — check on different resolutions, browsers, with varying data volumes (up to 10,000 events).
5. Deployment — deliver component with documentation and usage examples.

What's Included in the Work (Deliverables)

• Source code of the component in React/TypeScript
• Documentation on props and data types
• Integration example with REST API (JSON schema)
• Styled states: loading, empty, error
• Bug fix guarantee for 3 months

Typical Mistakes When Implementing Timelines

• Missing debounce on zoom — the handler fires dozens of times. Add onMove with throttling.
• Incorrect data types — dates must be Date objects or ISO 8601 strings, otherwise vis-timeline throws an error.
• Ignoring localization — if the timeline is in Russian, do not forget the locale: 'ru' parameter, otherwise months will be in English.

locale: 'ru', locales: { ru: { current: 'Текущее время', time: 'Время', } }