webdevpuneet.com

Related Snippets

93 in Charts category
55–60 of 60

Timeline Chart

Lollipop Chart

Bump Chart

Population Pyramid

Grouped Bar Chart

Donut Progress

Timeline Chart — Horizontal Schedule / Gantt Bars

Timeline Chart · Charts · Plain HTML, CSS & JS · Live preview

CategoryCharts
TagsData VisualizationCSS Grid

Copy & paste

Source Code

<div class="tc-card">
  <h3>Project schedule</h3>
  <div class="tc-scale" id="tcScale"></div>
  <div class="tc-rows" id="tcRows"></div>
  <div class="tc-tip" id="tcTip" hidden></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Shared time axis
All bars map onto one range so rows align.
Duration bars
Left and width come from start/end percentages.
Today marker
A red line across all rows shows the current point.
Gridlines + scale
Reference marks for reading start and end.
Per-bar labels
Each bar shows its length in days.
Animated reveal
Bars draw from their start edge on load.
Hover tooltips
Exact range on demand keeps it uncluttered.
No library
Pure HTML/CSS/JS — no Gantt dependency.

About this UI Snippet

Timeline Chart — Task Bars on a Horizontal Time Axis

Screenshot of the Timeline Chart snippet rendered live

A timeline chart places events or tasks along a shared horizontal time axis, each as a bar spanning its start to end — the visual behind project schedules, roadmaps, and Gantt views. This snippet builds a clean, lightweight timeline with a time scale, per-row duration bars, gridlines, a "today" marker, and tooltips, in plain HTML, CSS, and vanilla JavaScript with no SVG or library.

One scale, many rows

Every task is a grid row: a fixed label column and a track. Within the track, the bar's left and width are percentages derived from the task's start and end mapped onto the chart's time range — (day - min) / (max - min). Because every row shares that same pct() mapping, all bars line up under one time axis, so you can read overlaps and dependencies vertically at a glance. The scale across the top marks the range at regular intervals.

A today line across the chart

A red vertical marker at the current point cuts across every row, instantly showing what's in progress, done, or upcoming relative to now — the single most useful annotation on a schedule. It's positioned with the same percentage mapping as the bars, so it always stays aligned as the range changes.

Duration at a glance

Each bar shows its length in days and is coloured per task, and faint gridlines behind the bars give reference points for reading start and end without a precise axis. A brightness lift and a tooltip on hover reveal the exact start–end range, so the chart stays uncluttered while detail is one hover away.

Animated reveal

Bars grow from their start edge (a scaleX transition from 0, anchored left) on load, which animates the schedule into place and reinforces the left-to-right reading of time. The transform-origin at the left means each bar appears to "draw" from its start date.

Data-driven and portable

Tasks are { name, start, end, color } over an integer day range, so swapping in real dates (convert to day offsets) or adding rows is a data edit; the scale, gridlines, today marker, and bars all derive from the range. With no dependencies, it's a compact reference for the timeline/Gantt pattern when a full project-management library is overkill.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA project timeline renders with task bars and a today marker.
  2. 2
    Use your dataEdit TASKS ({ name, start, end, color }) and the MIN/MAX range.
  3. 3
    Set todayChange TODAY to position the red current-time line.
  4. 4
    Hover a barA tooltip shows the task and its start–end range.
  5. 5
    Read overlapsBars share one axis, so concurrency reads vertically.
  6. 6
    Use real datesConvert dates to day offsets from your range start.

Real-world uses

Common Use Cases

Lightweight project schedules
Plan phases as bars on one shared time axis, a quick alternative to a full gantt table when you only need to see overlaps and the red today line.
Product roadmaps
Lay out initiatives over a half-year beside a product roadmap view, with each bar's position and width derived from start and end percentages.
Marketing campaign planning
Show overlapping campaigns across channels so planners can spot crowded weeks. Gridlines and a scale make start and end dates easy to read without hovering.
Release milestones
Track the run-up to a launch with duration bars for build, testing and rollout, and a today marker showing how far along the team really is.
Learning date-to-position mapping
Use it to understand how dates map to percentages along an axis, the same idea behind every schedule view, calendar strip and time-based visualisation.

Got questions?

Frequently Asked Questions

Each task's start and end are mapped to percentages across the chart's time range with (value − min) / (max − min). The bar's left is the start percentage and its width is the end minus start percentage. Because every row uses the same mapping, all bars align under one shared axis, which is what lets you read overlaps and sequencing vertically.

Yes. Convert each date to a numeric offset — for example milliseconds via Date.getTime(), or days since your range start — and set MIN and MAX to the range bounds in the same units. The percentage mapping works on any numeric scale, so dates, weeks, or hours all work; just format the axis marks to match.

It is a vertical line drawn across every row at the current point in the range, using the same percentage mapping as the bars. It instantly communicates progress — tasks left of the line are in the past, the bar it crosses is in progress, and tasks to the right are upcoming. Update its value to move it as time passes.

It is essentially a lightweight Gantt: tasks as bars on a shared time axis. A full Gantt typically adds dependencies (arrows between tasks), drag-to-reschedule, and resource rows. This snippet focuses on the core read-only visualization — duration bars, a scale, gridlines, and a today marker — which covers most roadmap and schedule needs without a heavy library.

Map your tasks to rows and compute each bar's left and width from start/end percentages as inline styles. Render the scale marks and today line from the same mapping. Trigger the draw-on animation with a mounted effect or a class toggled after render, and track hover state for the tooltip. Tailwind users apply the grid and positioning with utilities.