Parent DateLabels

Quick Start

The parent row is disabled by default. Enable it under style.dateLabel.parent when a timeline needs higher-level context that remains stable while its normal date labels show finer detail.

const timeline = new Histropedia.Timeline(container, {
  style: {
    dateLabel: {
      parent: {
        visible: true,
        levels: 'all',
        height: 20,
        font: 'normal 14px Calibri',
        color: '#444',
        futureColor: '#ccc',
        textAlign: 'start',
        offset: { x: 4, y: 0 },
        sticky: { enabled: true, offsetX: 4 }
      }
    }
  }
});

Stable Row Layout

When visible is true, height is always included in the timeline's effective vertical offset. The main line therefore stays in the same position while zooming, including scales where levels suppresses the text or the scale engine has no meaningful parent.

The parent row is text-only. It does not alter minor/major label formatting, add a third marker type, or change marker geometry.

Levels and Scale Relationships

levels filters parent text according to the unit represented by the current major labels. Use 'all', or provide an array containing any of:

'millisecond', 'second', 'minute', 'hour', 'day', 'month', 'year', 'decade', 'century', and 'millennium'.

Adaptive divisions retain their unit identity: for example, 5-, 10-, and 30-minute major divisions all match 'minute'. Millennium, geological, and astronomical major scales leave the row blank when the current scale engine has no meaningful higher parent.

Formatting and Sticky Transitions

Parent labels reuse the major-label infrastructure for BCE text, thousands separators, and year prefixes. Calendar parents use conventional labels such as 20th century, 8th century BCE, and 3rd millennium BCE.

Each label begins at its parent interval boundary. With sticky.enabled: true, the containing parent remains at sticky.offsetX after its boundary leaves the viewport, then is pushed out and replaced by the next interval. Set sticky.enabled to false to leave labels at their calendar boundaries.

// The row can be enabled or reconfigured at runtime.
timeline.setOption('style.dateLabel.parent.visible', true);
timeline.setOption('style.dateLabel.parent.levels', [
  'millisecond', 'second', 'minute', 'hour'
]);