Styling

Overview

KronoGraph allows you to style and customize items within the timeline. Basic item styling is defined within the data loaded into KronoGraph. For more on styling items, use the links below:

• Entities
• Events
• Time Series Charts
• Annotations
• Markers

Override Styles

An override style is a visual property of an item in the timeline that can be changed without updating the properties of that item in the data.

Items that can have override styles applied are:

• Entities - update glyph settings, change the color, label color, or line width, or fade the entity line outside the range of its associated events.
• Events - update the color or line width, add or change a font icon or a label, show the event direction with an arrow, or apply a different event type.

You can change styles dynamically using event handlers or the timeline's internal state. Because item styles can be updated without having to reload the data, performance improves significantly.

Use the overrideStyles() overrideStyles API to update event and entity styling with the properties within the EntityStyle and EventStyle objects.

In the timeline below, override styles have been applied to 'event1', 'event3' and 'entity1'.

Kronograph Example

Log in to view live examples

const newStyle = [
    { ids: ['event1', 'event3'], style: { color: 'red' } },
    { ids: ['entity1'], style: { glyph: { color: 'green' }, lineWidth: 3 } },
  ];
timeline.set(timelineData);
timeline.fit();
timeline.overrideStyles(newStyle);

export const Demo = () => {
  const newStyle = [
      { ids: ['event1', 'event3'], style: { color: 'red' } },
      { ids: ['entity1'], style: { glyph: { color: 'green' }, lineWidth: 3 } },
    ];
  return (
      <Timeline
        events={events}
        entities={entities}
        overrideStyles={newStyle}
      />
  );
};

ReactDOM.render(<Demo />, document.getElementById('my-timeline'));

Reset any override styles using an empty array.

See how you can use overrideStyles() overrideStyles with event handlers in the Interactive Styling example.