Fit content, pan to a date, or change zoom with the timeline's viewport APIs.
Fit methods pan and zoom until the requested content fits. Date methods pan without changing zoom. setZoom() changes scale around the viewport center by default; lower values show a closer view and higher values show a wider view.
Run the task that matches your use case, then compare it with the corresponding code below.
Need to limit how far users can navigate? See the Date Bounds example.
Try a navigation task
const fitOptions = {
padding: { left: 70, right: 70 },
animation: { active: true, duration: 350, easing: "swing" }
};
timeline.fitDateRange(
{ year: 1957, month: 1, day: 1 },
{ year: 1969, month: 12, day: 31 },
fitOptions
);
const apollo = timeline.getArticleById("navigation-apollo");
timeline.fitArticleRange(apollo, fitOptions);
timeline.fitArticles(fitOptions);// Sub-day and deep-time navigation needs the opt-in zoom floor;
// zoom.minimum defaults to 0, which keeps day as the finest scale.
const timeline = new Histropedia.Timeline(container, {
zoom: { initial: 29, minimum: -82 },
// ... other options ...
});
timeline.setStartDate("1988-01-01", {
padding: 80,
animation: { active: true, duration: 350, easing: "swing" }
});
timeline.setCentreDate("1969-07-20");
// Canonical strings accept an optional time part.
timeline.setCentreDate("1969-07-20T20:17:40.25"); // .250
// Fit a one-millisecond range in deep time.
timeline.fitDateRange(
"1000000000-06-15T12:00:00.000",
"1000000000-06-15T12:00:00.001",
{ padding: { left: 70, right: 70 }, animation: { active: true, duration: 350 } }
);
// Lower values show a closer view; higher values show a wider view.
timeline.setZoom(27);