Markers are lines that span across all entities.
You can use markers to show events that are not connected to an entity.
See also:
Markers are lines that span across all entities.
You can use markers to show events that are not connected to an entity.
See also:
import { createTimeline } from "kronograph";
import data from "./data";
const fontAwesomeSolid = '900 16px "Font Awesome 5 Free"';
document.fonts.load(fontAwesomeSolid);
document.fonts.ready.then(() => {
// Ensures the font icons (declared in the HTML <head>)
// are ready before KronoGraph uses them.
const timeline = createTimeline("my-timeline");
timeline.set({ events: data.events, entities: data.entities });
timeline.markers(data.markers);
timeline.fit();
});export default {
markers: [
{
label: "Security Alert",
time: Date.UTC(2025, 7, 14, 8, 45),
color: "#FA8072",
labelColor: "#FA8072",
showAtBottom: false,
fontIcon: {
fontFamily: "Font Awesome 5 Free",
fontWeight: 900,
scale: 1.2,
text: "\u{f06a}",
},
},
{
label: "Recovery Procedure",
time: { start: Date.UTC(2025, 7, 14, 13, 45), end: Date.UTC(2025, 7, 14, 15) },
color: "#90ee90",
labelColor: "#90ee90",
fontIcon: {
fontFamily: "Font Awesome 5 Free",
fontWeight: 900,
scale: 1.2,
text: "\u{f011}",
},
},
],
entities: {
"smith-johnathan-151": {
label: "John Smith",
},
"west-josephine-126": {
label: "Josephine West",
},
"roberts-nathaniel-023": {
label: "Nathan Roberts",
},
"baxter-eleanor-004": {
label: "Ella Baxter",
},
},
events: {
"Email 1": {
entityIds: ["smith-johnathan-151", "roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 8, 49),
},
"Email 2": {
entityIds: ["smith-johnathan-151", "baxter-eleanor-004"],
time: new Date(2025, 7, 14, 8, 56),
},
"Email 3": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 9, 2),
},
"Email 4": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 9, 27),
},
"Email 5": {
entityIds: ["baxter-eleanor-004", "roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 10, 20),
},
"Email 6": {
entityIds: ["roberts-nathaniel-023", "smith-johnathan-151"],
time: new Date(2025, 7, 14, 10, 30),
},
"Email 7": {
entityIds: ["west-josephine-126", "smith-johnathan-151"],
time: new Date(2025, 7, 14, 10, 40),
},
"Email 8": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 10, 51),
},
"Email 9": {
entityIds: ["west-josephine-126", "smith-johnathan-151"],
time: new Date(2025, 7, 14, 12, 5),
},
"Email 10": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 14, 37),
},
"Email 11": {
entityIds: ["baxter-eleanor-004", "west-josephine-126"],
time: new Date(2025, 7, 14, 16, 7),
},
"Email 12": {
entityIds: ["west-josephine-126", "roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 17, 42),
},
},
};<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div id="my-timeline" style="height: 100vh"></div>
<script type="module" src="./code.js"></script>
</body>
</html>import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import data from "./data";
const loadFonts = () => {
// These fonts are declared in the <head> element of the HTML page.
const fontAwesomeSolid = '900 16px "Font Awesome 5 Free"';
document.fonts.load(fontAwesomeSolid);
};
export const Demo = () => {
const [fontsReady, setFontsReady] = useState(false);
loadFonts();
document.fonts.ready.then(() => {
setFontsReady(true);
});
if (!fontsReady) {
return null;
}
return <Timeline entities={data.entities} events={data.events} markers={data.markers} />;
};
const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);export default {
markers: [
{
label: "Security Alert",
time: Date.UTC(2025, 7, 14, 8, 45),
color: "#FA8072",
labelColor: "#FA8072",
showAtBottom: false,
fontIcon: {
fontFamily: "Font Awesome 5 Free",
fontWeight: 900,
scale: 1.2,
text: "\u{f06a}",
},
},
{
label: "Recovery Procedure",
time: { start: Date.UTC(2025, 7, 14, 13, 45), end: Date.UTC(2025, 7, 14, 15) },
color: "#90ee90",
labelColor: "#90ee90",
fontIcon: {
fontFamily: "Font Awesome 5 Free",
fontWeight: 900,
scale: 1.2,
text: "\u{f011}",
},
},
],
entities: {
"smith-johnathan-151": {
label: "John Smith",
},
"west-josephine-126": {
label: "Josephine West",
},
"roberts-nathaniel-023": {
label: "Nathan Roberts",
},
"baxter-eleanor-004": {
label: "Ella Baxter",
},
},
events: {
"Email 1": {
entityIds: ["smith-johnathan-151", "roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 8, 49),
},
"Email 2": {
entityIds: ["smith-johnathan-151", "baxter-eleanor-004"],
time: new Date(2025, 7, 14, 8, 56),
},
"Email 3": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 9, 2),
},
"Email 4": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 9, 27),
},
"Email 5": {
entityIds: ["baxter-eleanor-004", "roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 10, 20),
},
"Email 6": {
entityIds: ["roberts-nathaniel-023", "smith-johnathan-151"],
time: new Date(2025, 7, 14, 10, 30),
},
"Email 7": {
entityIds: ["west-josephine-126", "smith-johnathan-151"],
time: new Date(2025, 7, 14, 10, 40),
},
"Email 8": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 10, 51),
},
"Email 9": {
entityIds: ["west-josephine-126", "smith-johnathan-151"],
time: new Date(2025, 7, 14, 12, 5),
},
"Email 10": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 14, 37),
},
"Email 11": {
entityIds: ["baxter-eleanor-004", "west-josephine-126"],
time: new Date(2025, 7, 14, 16, 7),
},
"Email 12": {
entityIds: ["west-josephine-126", "roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 17, 42),
},
},
};<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div id="my-timeline" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>