Examples

Sub-day Zoom

Explore a continuous date scale from days through individual milliseconds.

Exact timestamp navigation

zoom.minimum: -82 inferred millisecond precision adaptive subdivisions sticky major labels parent date row styled date indicators ranked density

This timeline starts at the exact calendar position 2026-08-13T12:30:14.999 with zoom: { initial: -80, minimum: -82 }. Wheel, pinch, or pan across the scale to see compact minor labels, consistently formatted major labels, adaptive subdivisions, and sticky label transitions. The optional parent row keeps the containing day visible without changing the major time labels.

Only this example opts into sub-day zoom. The library default remains zoom.minimum: 0, so existing timelines keep day as their finest reachable scale. Lower-ranked millisecond articles progressively appear as you zoom further in; their circular main-line indicators remain visible at reduced opacity. Select a card to see its indicator grow and resolve the active article colour.

Each article supplies a millisecond date key but omits precision, allowing HistropediaJS to infer millisecond precision automatically. Date-only data still defaults to day precision.

The blue main line uses the new gradient form of style.mainLine.color. A CSS colour string selects a solid fill instead; v1.6.0 uses a neutral solid fill by default.

v1.6.0 style configuration 
style: {
  mainLine: {
    color: { type: 'gradient', topColor: '#1d4ed8', bottomColor: '#60a5fa' },
    dateIndicators: {
      shape: 'circle',
      size: 6,
      color: 'article',
      hiddenStyle: { opacity: 0.25 },
      activeStyle: { color: 'article', size: 9, opacity: 1 }
    }
  },
  dateLabel: {
    parent: {
      visible: true,
      levels: ['millisecond', 'second', 'minute', 'hour']
    }
  }
}

timeline.setCentreDate('2026-08-13T12:30:15.005');