Search

Event Labels

Events

Display text labels on event lines with custom colors.

Event Labels
View live example →

Use the controls below the timeline to change the text displayed in labels on event lines, and the orientation of those labels.

Each event has a label property where you can set the text and color of the label displayed on its event line.

See also:

import { createTimeline } from "kronograph";
import { entities, events, eventTypes } from "./data";

const timelineOptions = {
  entities: {
    standardRowHeight: 28,
  },
};

function formatData(data, orientation, labelText) {
  const formatedEvents = Object.fromEntries(
    Object.entries(data.events).map(([k, v], i) => [
      k,
      {
        ...v,
        ...{
          label: {
            text:
              labelText === "font-icon"
                ? {
                    fontFamily: "Font Awesome 5 Free",
                    text: i % 2 === 0 ? "₿" : "$",
                  }
                : v.data.amount,
            orientation,
          },
        },
      },
    ])
  );

  return { entities, events: formatedEvents };
}

function onChange() {
  const orientation = document.getElementById("orientation").value;
  const labelText = document.getElementById("label-text").value;
  const formatedData = formatData({ events }, orientation, labelText);
  timeline.set({ entities, events: formatedData.events, eventTypes });
}

const timeline = createTimeline("my-timeline");
timeline.options(timelineOptions);
timeline.setOrdering("firstevent");
const formatedData = formatData({ events }, "horizontal", "amount");
timeline.set({ entities, events: formatedData.events, eventTypes });
timeline.fit();

document.getElementById("orientation").addEventListener("change", onChange);
document.getElementById("label-text").addEventListener("change", onChange);
export const entities = {
  "smith-johnathan-151": {
    label: "John Smith",
    color: "#17cad5",
  },
  "west-josephine-126": {
    label: "Josephine West",
    color: "#f7d16e",
  },
  "roberts-nathaniel-023": {
    label: "Nathan Roberts",
    color: "#f7d16e",
  },
};

export const eventTypes = {
  gradientEventColor: {
    color: "entity",
  },
  solidEventColor: {
    color: "to",
  },
};

export const events = {
  "email 1": {
    entityIds: ["roberts-nathaniel-023", "smith-johnathan-151"],
    time: new Date(2025, 7, 14, 8, 49),
    type: "solidEventColor",
    data: {
      amount: `$594`,
    },
  },
  "email 3": {
    entityIds: ["smith-johnathan-151", "west-josephine-126"],
    time: new Date(2025, 7, 14, 9, 2),
    type: "solidEventColor",
    data: {
      amount: `$678`,
    },
  },
  "email 4": {
    entityIds: ["west-josephine-126", "smith-johnathan-151"],
    time: new Date(2025, 7, 14, 9, 27),
    type: "solidEventColor",
    data: {
      amount: `$112`,
    },
  },
  "email 7": {
    entityIds: ["smith-johnathan-151", "west-josephine-126"],
    time: new Date(2025, 7, 14, 10, 34),
    type: "solidEventColor",
    data: {
      amount: `$765`,
    },
  },
  "email 9": {
    entityIds: ["smith-johnathan-151", "west-josephine-126"],
    time: new Date(2025, 7, 14, 10, 51),
    type: "gradientEventColor",
    data: {
      amount: `$127`,
    },
  },
  "email 10": {
    entityIds: ["west-josephine-126", "smith-johnathan-151"],
    time: new Date(2025, 7, 14, 12, 5),
    type: "solidEventColor",
    data: {
      amount: `$345`,
    },
  },
  "email 11": {
    entityIds: ["smith-johnathan-151", "west-josephine-126"],
    time: new Date(2025, 7, 14, 14, 37),
    type: "gradientEventColor",
    data: {
      amount: `$987`,
    },
  },
  "email 13": {
    entityIds: ["west-josephine-126", "roberts-nathaniel-023"],
    time: new Date(2025, 7, 14, 17, 42),
    type: "solidEventColor",
    data: {
      amount: `$123`,
    },
    color: "from",
  },
  // event fold
  "email 14": {
    entityIds: ["west-josephine-126", "smith-johnathan-151"],
    time: new Date(2025, 7, 14, 13, 2),
    type: "gradientEventColor",
    data: {
      amount: `$678`,
    },
  },
  "email 16": {
    entityIds: ["smith-johnathan-151", "roberts-nathaniel-023"],
    time: new Date(2025, 7, 14, 13, 2),
    type: "solidEventColor",
    data: {
      amount: `$901`,
    },
  },
  "email 17": {
    entityIds: ["west-josephine-126", "smith-johnathan-151"],
    time: new Date(2025, 7, 14, 13, 2),
    type: "solidEventColor",
    data: {
      amount: `$901`,
    },
  },
};
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
  </head>
  <body>
    <div class="story">
      <div class="story__timeline" id="my-timeline"></div>
      <div class="story__controls story__controls--row">
        <div class="stack stack--xsmall">
          <div class="story__controls__item">
            <label html-for="orientation">Orientation</label>
            <select id="orientation" class="select">
              <option value="horizontal">horizontal</option>
              <option value="up">up</option>
              <option value="down">down</option>
            </select>
          </div>
        </div>
        <div class="stack stack--xsmall">
          <div class="story__controls__item">
            <label html-for="label-text">Label text</label>
            <select id="label-text" class="select">
              <option value="amount">transaction amount</option>
              <option value="font-icon">transaction type icon</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="./code.js"></script>
  </body>
</html>
import React, { useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import { entities, events, eventTypes } from "./data";

function formatData(data, orientation, labelText) {
  const formatedEvents = Object.fromEntries(
    Object.entries(data.events).map(([k, v], i) => [
      k,
      {
        ...v,
        ...{
          label: {
            text:
              labelText === "font-icon"
                ? {
                    fontFamily: "Font Awesome 5 Free",
                    text: i % 2 === 0 ? "₿" : "$",
                  }
                : v.data.amount,
            orientation,
          },
        },
      },
    ])
  );

  return { entities, events: formatedEvents };
}

export const Demo = () => {
  const storyContainer = useRef(null);
  const timelineRef = useRef(null);

  const [labelOrientation, setLabelOrientation] = useState();
  const [labelText, setLabelText] = useState("amount");

  const timelineData = formatData({ entities, events }, labelOrientation, labelText);

  return (
    <>
      <div className="story" ref={storyContainer}>
        <Timeline
          ref={timelineRef}
          entities={timelineData.entities}
          events={timelineData.events}
          eventTypes={eventTypes}
          options={{
            entities: {
              standardRowHeight: 28,
            },
          }}
          ordering="firstevent"
        />
        <div className="story__controls story__controls--row">
          <div className="stack stack--xsmall">
            <div className="story__controls__item">
              <label htmlFor="orientation">Orientation</label>
              <select
                id="orientation"
                className="select"
                value={labelOrientation}
                onChange={(event) => setLabelOrientation(event.target.value)}
              >
                <option value="horizontal">horizontal</option>
                <option value="up">up</option>
                <option value="down">down</option>
              </select>
            </div>
          </div>
          <div className="stack stack--xsmall">
            <div className="story__controls__item">
              <label htmlFor="label-text">Label text</label>
              <select
                id="label-text"
                className="select"
                value={labelText}
                onChange={(event) => setLabelText(event.target.value)}
              >
                <option value="amount">transaction amount</option>
                <option value="font-icon">transaction ;         /option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);
export const entities = {
  "smith-johnathan-151": {
    label: "John Smith",
    color: "#17cad5",
  },
  "west-josephine-126": {
    label: "Josephine West",
    color: "#f7d16e",
  },
  "roberts-nathaniel-023": {
    label: "Nathan Roberts",
    color: "#f7d16e",
  },
};

export const eventTypes = {
  gradientEventColor: {
    color: "entity",
  },
  solidEventColor: {
    color: "to",
  },
};

export const events = {
  "email 1": {
    entityIds: ["roberts-nathaniel-023", "smith-johnathan-151"],
    time: new Date(2025, 7, 14, 8, 49),
    type: "solidEventColor",
    data: {
      amount: `$594`,
    },
  },
  "email 3": {
    entityIds: ["smith-johnathan-151", "west-josephine-126"],
    time: new Date(2025, 7, 14, 9, 2),
    type: "solidEventColor",
    data: {
      amount: `$678`,
    },
  },
  "email 4": {
    entityIds: ["west-josephine-126", "smith-johnathan-151"],
    time: new Date(2025, 7, 14, 9, 27),
    type: "solidEventColor",
    data: {
      amount: `$112`,
    },
  },
  "email 7": {
    entityIds: ["smith-johnathan-151", "west-josephine-126"],
    time: new Date(2025, 7, 14, 10, 34),
    type: "solidEventColor",
    data: {
      amount: `$765`,
    },
  },
  "email 9": {
    entityIds: ["smith-johnathan-151", "west-josephine-126"],
    time: new Date(2025, 7, 14, 10, 51),
    type: "gradientEventColor",
    data: {
      amount: `$127`,
    },
  },
  "email 10": {
    entityIds: ["west-josephine-126", "smith-johnathan-151"],
    time: new Date(2025, 7, 14, 12, 5),
    type: "solidEventColor",
    data: {
      amount: `$345`,
    },
  },
  "email 11": {
    entityIds: ["smith-johnathan-151", "west-josephine-126"],
    time: new Date(2025, 7, 14, 14, 37),
    type: "gradientEventColor",
    data: {
      amount: `$987`,
    },
  },
  "email 13": {
    entityIds: ["west-josephine-126", "roberts-nathaniel-023"],
    time: new Date(2025, 7, 14, 17, 42),
    type: "solidEventColor",
    data: {
      amount: `$123`,
    },
    color: "from",
  },
  // event fold
  "email 14": {
    entityIds: ["west-josephine-126", "smith-johnathan-151"],
    time: new Date(2025, 7, 14, 13, 2),
    type: "gradientEventColor",
    data: {
      amount: `$678`,
    },
  },
  "email 16": {
    entityIds: ["smith-johnathan-151", "roberts-nathaniel-023"],
    time: new Date(2025, 7, 14, 13, 2),
    type: "solidEventColor",
    data: {
      amount: `$901`,
    },
  },
  "email 17": {
    entityIds: ["west-josephine-126", "smith-johnathan-151"],
    time: new Date(2025, 7, 14, 13, 2),
    type: "solidEventColor",
    data: {
      amount: `$901`,
    },
  },
};
<!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>

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.