Search

Login

Timeline Customization

Overview

KronoGraph allows you to set up the timeline in many different ways so you can change its look, feel and behavior to suit your requirements and data.

Options

Most timeline settings can be found in TimelineOptions. Pass them to the options method options prop to make the changes.

The examples below illustrate the effect of changing the background color, entity label colors, focus control display, fonts, entity highlight color, scale positions, annotation settings and more.

Default settings

This is the default timeline. If no timeline options are specified, then these default values are used.

Log in to view live example

Kronograph Example

Change background color

The timeline backgroundColor has been changed to blue.

Log in to view live example

Kronograph Example

timeline.options({
  backgroundColor: "#2C497F",
});
<Timeline
  options={{
    backgroundColor: "#2C497F",
  }}
/>;

Change available entity controls

Hover over an entity to see what controls are available. The pin control has been removed from the entity timelines using pin.

Log in to view live example

Kronograph Example

timeline.options({
  controls: {
    pin: { show: false },
  },
});
<Timeline
  options={{
    controls: {
      pin: { show: false },
    },
  }}
/>;

Note the color of the controls is derived from each entity's labelColor in the default entity type.

Change entity label color

The entity labelBackgroundColor has changed to green.

Log in to view live example

Kronograph Example

timeline.options({
  entities: {
    labelBackgroundColor: "#3EBD93",
  },
});
<Timeline
  options={{
    entities: {
      labelBackgroundColor: "#3EBD93",
    },
  }}
/>;

Change entity spacing

The entity rowSpacing has changed to 'justified', so that entities are spread vertically across the height of the timeline, providing more space for any event labels and font icons.

Log in to view live example

Kronograph Example

timeline.options({
  entities: {
    rowSpacing: "justified",
  },
});
<Timeline
  options={{
    entities: {
      rowSpacing: "justified",
    },
  }}
/>;

Change display of events

The alignment of the arrows joining events to entities has changed. The joinStyle for events is now horizontal.

Log in to view live example

Kronograph Example

timeline.options({
  events: {
    joinStyle: "horizontal",
  },
});
<Timeline
  options={{
    events: {
      joinStyle: "horizontal",
    },
  }}
/>;

Change focus color

The focus backgroundColor, seen when you focus on an entity by clicking Focus icon, has changed to orange.

Log in to view live example

Kronograph Example

timeline.options({
  focus: {
    backgroundColor: "#FF8838",
  },
});
<Timeline
  options={{
    focus: {
      backgroundColor: "#FF8838",
    },
  }}
/>;

Change entity highlight color

The entity highlightColor, shown as a faint colored bar when you hover over an entity, has been changed to be more orange.

Log in to view live example

Kronograph Example

timeline.options({
  highlightColor: "#FF8838",
});
<Timeline
  options={{
    highlightColor: "#FF8838",
  }}
/>;

Change time scale appearance

The top time scale has been removed from the timeline with showAtTop.

The textColor and textSize of the bottom time scale have also been changed.

Log in to view live example

Kronograph Example

timeline.options({
  scales: {
    showAtTop: false,
    textColor: "#3EBD93",
    textSize: 16,
  },
});
<Timeline
  options={{
    scales: {
      showAtTop: false,
      textColor: "#3EBD93",
      textSize: 16,
    },
  }}
/>;

See Time Scales for more information about using the time scale to show time in different ways.

Change font

The timeline fontFamily has changed to Courier New.

Log in to view live example

Kronograph Example

timeline.options({
  fontFamily: "Courier New",
});
<Timeline
  options={{
    fontFamily: "Courier New",
  }}
/>;

Display scale guide

A scale guide is now displayed when you hover over the timeline, to help see the exact time that events occur. The scale guide showAtTop and width have also been set.

Log in to view live example

Kronograph Example

timeline.options({
  scaleGuide: { showAtTop: true, width: 2 },
});
<Timeline
  options={{
    scaleGuide: { showAtTop: true, width: 2 },
  }}
/>;

Change annotation settings

The topRailHeight, which defines the band in which annotations sit by default, has been reduced to 80px and the maximumBodyWidth has increased to 500px.

Log in to view live example

Kronograph Example

timeline.options({
  annotations: { topRailHeight: 80, maximumBodyWidth: 500 },
});
<Timeline
  options={{
    annotations: { topRailHeight: 80, maximumBodyWidth: 500 },
  }}
/>;

View all changes

This is the timeline with all the options we have chosen.

Log in to view live example

Kronograph Example

timeline.options({
  annotations: { topRailHeight: 80, maximumBodyWidth: 500 },
  backgroundColor: "#2C497F",
  controls: { focus: { show: true }, pin: { show: false } },
  entities: { labelBackgroundColor: "#3EBD93" },
  events: { joinStyle: "horizontal" },
  focus: { backgroundColor: "#F5B841" },
  fontFamily: "Courier New",
  highlightColor: "#FF8838",
  scaleGuide: { showAtTop: true, width: 2 },
  scales: {
    showAtTop: false,
    textColor: "#3EBD93",
    textSize: 10,
  },
});
<Timeline
  options={{
    annotations: { topRailHeight: 80, maximumBodyWidth: 500 },
    backgroundColor: "#2C497F",
    controls: { focus: { show: true }, pin: { show: false } },
    entities: { labelBackgroundColor: "#3EBD93" },
    events: { joinStyle: "horizontal" },
    focus: { backgroundColor: "#F5B841" },
    fontFamily: "Courier New",
    highlightColor: "#FF8838",
    scaleGuide: { showAtTop: true, width: 2 },
    scales: {
      showAtTop: false,
      textColor: "#3EBD93",
      textSize: 10,
    },
  }}
/>;

Show Lens Highlight

The lens view control Lens icon is shown automatically when there's not enough vertical space to show entity labels.

By default, the entities to be magnified in lens view are shown in a highlighted band, known as the lens highlight. To disable it, as illustrated here, use the showLensHighlight option:

timeline.options({ showLensHighlight: false });
<Timeline
  options={{
    showLensHighlight: false,
  }}
/>;

See the Lens example for more information.

Expanded Rows

Usually an entity's timeline is displayed using a single row, known as the entity row. If entities have duration events overlapping with instantaneous events, or an event summary, it can be helpful to add extra sub-rows to display them more clearly (if there's room).

You can set entity rows to expand using the expandedRows API so that users can zoom in on busy areas and see individual events more clearly, as illustrated:

You can set entity rows to expand using the expandedRows method so that users can zoom in on busy areas and see individual events more clearly, as illustrated:

Don't expand rows

All entity timelines are shown as single rows if the expandedRows timeline option isn't used.

Log in to view live example

Kronograph Example

Expand all rows, as needed

Event summaries are expanded and shown on separate sub-rows as well as any events overlapping with duration events (if there's room).

Log in to view live example

Kronograph Example

timeline.expandedRows("auto");
timeline.options({
  expandedRows: {
    durationEventsOnly: false,
  },
});
<Timeline expandedRows={"auto"} />;
<Timeline
  options={{
    expandedRows: {
      durationEventsOnly: false,
    },
  }}
/>;

Expand rows using the default settings

Using the default settings, duration events are shown on separate sub-rows when overlapping with other events, but event summaries aren't affected.

Log in to view live example

Kronograph Example

timeline.expandedRows("auto");
timeline.options({
  expandedRows: {
    durationEventsOnly: true,
  },
});
<Timeline expandedRows={"auto"} />;
<Timeline
  options={{
    expandedRows: {
      durationEventsOnly: true,
    },
  }}
/>;

Expand only duration events that affect Andrew

Only duration events affecting Andrew are shown on separate sub-rows when overlapping with other events. Event summaries that include him aren't affected, and all the other entity timelines are shown as single rows.

Log in to view live example

Kronograph Example

timeline.expandedRows("manual", "mckenzie-andrew");
timeline.options({
  expandedRows: {
    durationEventsOnly: true,
  },
});
<Timeline expandedRows={["manual", "mckenzie-andrew"]} />;
<Timeline
  options={{
    expandedRows: {
      durationEventsOnly: true,
    },
  }}
/>;

Expand rows with default settings, adding sub-row lines

Duration events are shown on separate, visible sub-rows when overlapping with other events, but event summaries aren't affected.

Log in to view live example

Kronograph Example

timeline.expandedRows("auto");
timeline.options({
  expandedRows: {
    durationEventsOnly: true,
    showSubRowLines: true,
  },
});
<Timeline expandedRows={"auto"} />;
<Timeline
  options={{
    expandedRows: {
      durationEventsOnly: true,
      showSubRowLines: true,
    },
  }}
/>;

Refine how entity rows are expanded using:

  • The expandedRows timeline options allow you to specify display options.

  • The expandedRows object specifies the entities whose rows are to be expanded.

  • The expandedRows event is fired when the set of entities to be expanded changes.

  • The expandedRows prop returns the ids of the entities to be expanded.

To explore further, take a look at the Expanded Rows example.

Note that you can also control whether entity lines are shown using the showEntityLines option.

Entity Label Area Width

By default, KronoGraph adjusts the width of the entity label area automatically to best display the labels in your data. Alternatively, you can set the label area width to a custom value and allow the user to adjust the area width by dragging the area boundary, shown below.

Log in to view live example

Kronograph Example

timeline.labelAreaWidth("fixed", 200);
<Timeline labelAreaWidth={{ mode: "fixed", width: 200 }} />;

The width is set in pixels, and can be anywhere between 125px and 80% of the width of the timeline. Any value outside of these limits will be automatically adjusted to be within the limits.

For further details see the labelAreaWidth() API and the Styling the Timeline example.

For further details see the labelAreaWidth() API and the Styling the Timeline example.

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.