<granite-timeline> demo

Basic timeline

<granite-timeline
    data='[{"times":[{"starting_time":1355752800000,"ending_time":1355759900000}, …]}, …]'
    show-time-axis></granite-timeline>

Stacked, with labels, row separators and background

<granite-timeline stack show-time-axis margin-left="100"
    row-separators="lightgray" background="#f7f7f7"></granite-timeline>
// data with series labels and per-bar labels set as a property, see demo.js

Custom color scale with colors-property

el.colors = scaleOrdinal()
    .domain(['apple', 'orange', 'lemon'])
    .range(['#6b0000', '#ef9b0f', '#ffee00']);
// per-time `fruit` overrides the series one; per-time `color` overrides everything

Today line and tick configuration

el.tickTime = timeHour;   // from 'd3-time'
<granite-timeline show-today today-color="red" today-width="2"
    tick-interval="3" tick-format="%H:%M" rotate-ticks="-30"></granite-timeline>

Axis zoom & pan

Ctrl/⌘ + mouse wheel (or trackpad pinch) to zoom, drag to pan, double-click to zoom in.

(zoom events will appear here) 
<granite-timeline stack show-time-axis axis-zoom></granite-timeline>
el.addEventListener('zoom', (e) => { /* e.detail = {start, end, transform} */ });
el.resetZoom();   // back to the full-domain view

Events

Click or hover the bars:

(no events yet)