Search

Expanded Rows

Timeline

Expand entity rows into sub-rows for busy sequences.

Expanded Rows
View live example →

You can set entity rows to expand vertically by adding sub‑rows to space out events when needed, if there's room.

Use the controls to select which entity (or set of entities) to expand, and whether to only expand their rows when duration events overlap with other events, or always.

See also:

import { createTimeline } from "kronograph";
import data from "./data";

const timeline = createTimeline("my-timeline");
timeline.options({ highlightColor: "white" });
timeline.setOrdering("keyorder");
timeline.set(data);
timeline.fit();

const expandSelect = document.getElementById("expand-select");
const durationSelect = document.getElementById("duration-select");
const subRowsSelect = document.getElementById("subrows-select");

expandSelect.addEventListener("change", (e) => {
  if (e.target.value === "all") {
    timeline.expandedRows("auto");
  } else if (e.target.value !== "none") {
    timeline.expandedRows("manual", e.target.value);
  } else {
    timeline.expandedRows("manual", []);
  }
});

durationSelect.addEventListener("change", (e) => {
  timeline.options({ expandedRows: { durationEventsOnly: e.target.value === "true" } });
});

subRowsSelect.addEventListener("change", (e) => {
  timeline.options({ expandedRows: { showSubRowLines: e.target.value === "true" } });
});
export default {
  entities: {
    "west-josephine": {
      label: "Josephine West",
      color: "#f28e2c",
    },
    "smith-johnathan": {
      label: "John Smith",
      color: "#4e79a7",
    },
    "roberts-nathaniel": {
      label: "Nathan Roberts",
      color: "#76b7b2",
    },
    "baxter-eleanor": {
      label: "Ella Baxter",
      color: "#59a14f",
    },
    "mckenzie-andrew": {
      label: "Andrew McKenzie",
      color: "#e15759",
    },
  },
  events: {
    "email 1": {
      entityIds: ["smith-johnathan", "roberts-nathaniel"],
      time: 1755161340000,
    },
    "email 2": {
      entityIds: ["smith-johnathan", "baxter-eleanor"],
      time: 1755161760000,
    },
    "email 2a": {
      entityIds: ["baxter-eleanor"],
      time: { start: 1755161060000, end: 1755162060000 },
    },
    "email 3": {
      entityIds: ["smith-johnathan", "west-josephine"],
      time: 1755162120000,
    },
    "email 4": {
      entityIds: ["smith-johnathan", "west-josephine"],
      time: 1755163620000,
    },
    "email 5": {
      entityIds: ["baxter-eleanor", "roberts-nathaniel"],
      time: 1755166800000,
    },
    "email 6": {
      entityIds: ["roberts-nathaniel", "smith-johnathan"],
      time: 1755167300000,
    },
    "email 7": {
      entityIds: ["smith-johnathan", "west-josephine"],
      time: 1755167640000,
    },
    "email 8": {
      entityIds: ["west-josephine", "smith-johnathan"],
      time: 1755168000000,
    },
    "email 9": {
      entityIds: ["smith-johnathan", "west-josephine"],
      time: 1755168660000,
    },
    "email 10": {
      entityIds: ["west-josephine", "smith-johnathan"],
      time: 1755173100000,
    },
    "email 11": {
      entityIds: ["smith-johnathan", "west-josephine"],
      time: 1755182220000,
    },
    "email 12": {
      entityIds: ["roberts-nathaniel"],
      time: 1755167200000,
    },
    "email 13": {
      entityIds: ["smith-johnathan"],
      time: { start: 1755167400000, end: 1755168660000 },
    },
    "email 14": {
      entityIds: ["mckenzie-andrew"],
      time: { start: 1755163060000, end: 1755166060000 },
    },
    "email 15": {
      entityIds: ["mckenzie-andrew"],
      time: { start: 1755166060000, end: 1755166260000 },
    },
    "email 16": {
      entityIds: ["mckenzie-andrew"],
      time: { start: 1755166260000, end: 1755166560000 },
    },
    "email 17": {
      entityIds: ["mckenzie-andrew"],
      time: 1755168560000,
    },
    "email 18": {
      entityIds: ["mckenzie-andrew", "roberts-nathaniel"],
      time: 1755168860000,
    },
    "email 19": {
      entityIds: ["mckenzie-andrew", "roberts-nathaniel"],
      time: 1755155560000,
    },
    "email 20": {
      entityIds: ["mckenzie-andrew", "roberts-nathaniel"],
      time: 1755168960000,
    },
    "email 21": {
      entityIds: ["mckenzie-andrew", "roberts-nathaniel"],
      time: 1755169060000,
    },
  },
};
<!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">
          <div class="story__controls__item">
            <label for="expand-select">Expand Row</label>
            <select id="expand-select" class="select story__controls__item__child--flex-2">
              <option value="none" selected>None</option>
              <option value="all">All</option>
              <option value="smith-johnathan">John Smith</option>
              <option value="west-josephine">Josephine West</option>
              <option value="mckenzie-andrew">Andrew McKenzie</option>
              <option value="roberts-nathaniel">Nathan Roberts</option>
              <option value="baxter-eleanor">Ella Baxter</option>
            </select>
            <label for="duration-select">Duration Events Only</label>
            <select id="duration-select" class="select story__controls__item__child--flex-2">
              <option value="true" selected>True</option>
              <option value="false">False</option>
            </select>
            <label for="subrows-select">Show Sub-row Lines</label>
            <select id="subrows-select" class="select story__controls__item__child--flex-2">
              <option value="false" selected>False</option>
              <option value="true">True</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 data from "./data";

export const Demo = () => {
  const storyContainer = useRef(null);
  const timelineRef = useRef(null);
  const [expandedRows, setExpandedRows] = useState({ mode: "manual", ids: [] });
  const [durationEventsOnly, setDurationEventsOnly] = useState(true);
  const [showSubRowLines, setShowSubRowLines] = useState(false);

  function updateExpandedRows(value) {
    let expandedRows = { mode: "auto" };
    if (value === "none") {
      expandedRows = { mode: "manual", ids: [] };
    } else if (value !== "all") {
      expandedRows = { mode: "manual", ids: value };
    }
    setExpandedRows(expandedRows);
  }

  return (
    <>
      <div className="story" ref={storyContainer}>
        <Timeline
          ref={timelineRef}
          entities={data.entities}
          events={data.events}
          options={{
            expandedRows: {
              durationEventsOnly,
              showSubRowLines,
            },
            highlightColor: "white",
          }}
          ordering="keyorder"
          expandedRows={expandedRows}
        />
        <div className="story__controls story__controls--row">
          <div className="stack stack--xsmall">
            <div className="story__controls__item">
              <label htmlFor="expandedrow">Expanded Row</label>
              <select
                id="expandedrow"
                className="select"
                defaultValue={"none"}
                onChange={(event) => updateExpandedRows(event.target.value)}
              >
                <option value="none">None</option>
                <option value="all">All</option>
                <option value="smith-johnathan">John Smith</option>
                <option value="west-josephine">Josephine West</option>
                <option value="mckenzie-andrew">Andrew McKenzie</option>
                <option value="roberts-nathaniel">Nathan Roberts</option>
                <option value="baxter-eleanor">Ella Baxter</option>
              </select>
            </div>
          </div>
          <div className="stack stack--xsmall">
            <div className="story__controls__item">
              <label htmlFor="durationeventsonly">Duration Events Only</label>
              <select
                id="durationeventsonly"
                className="select"
                value={durationEventsOnly}
                onChange={(event) => setDurationEventsOnly(event.target.value === "true")}
              >
                <option value="true">True</option>
                <option value="false">False</option>
              </select>
            </div>
          </div>
          <div className="stack stack--xsmall">
            <div className="story__controls__item">
              <label htmlFor="subrowlines">Show Sub-row Lines</label>
              <select
                id="subrowlines"
                className="select"
                value={showSubRowLines}
                onChange={(event) => setShowSubRowLines(event.target.value === "true")}
              >
                <option value="true">True</option>
                <option value="false">False</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);
export default {
  entities: {
    "west-josephine": {
      label: "Josephine West",
      color: "#f28e2c",
    },
    "smith-johnathan": {
      label: "John Smith",
      color: "#4e79a7",
    },
    "roberts-nathaniel": {
      label: "Nathan Roberts",
      color: "#76b7b2",
    },
    "baxter-eleanor": {
      label: "Ella Baxter",
      color: "#59a14f",
    },
    "mckenzie-andrew": {
      label: "Andrew McKenzie",
      color: "#e15759",
    },
  },
  events: {
    "email 1": {
      entityIds: ["smith-johnathan", "roberts-nathaniel"],
      time: 1755161340000,
    },
    "email 2": {
      entityIds: ["smith-johnathan", "baxter-eleanor"],
      time: 1755161760000,
    },
    "email 2a": {
      entityIds: ["baxter-eleanor"],
      time: { start: 1755161060000, end: 1755162060000 },
    },
    "email 3": {
      entityIds: ["smith-johnathan", "west-josephine"],
      time: 1755162120000,
    },
    "email 4": {
      entityIds: ["smith-johnathan", "west-josephine"],
      time: 1755163620000,
    },
    "email 5": {
      entityIds: ["baxter-eleanor", "roberts-nathaniel"],
      time: 1755166800000,
    },
    "email 6": {
      entityIds: ["roberts-nathaniel", "smith-johnathan"],
      time: 1755167300000,
    },
    "email 7": {
      entityIds: ["smith-johnathan", "west-josephine"],
      time: 1755167640000,
    },
    "email 8": {
      entityIds: ["west-josephine", "smith-johnathan"],
      time: 1755168000000,
    },
    "email 9": {
      entityIds: ["smith-johnathan", "west-josephine"],
      time: 1755168660000,
    },
    "email 10": {
      entityIds: ["west-josephine", "smith-johnathan"],
      time: 1755173100000,
    },
    "email 11": {
      entityIds: ["smith-johnathan", "west-josephine"],
      time: 1755182220000,
    },
    "email 12": {
      entityIds: ["roberts-nathaniel"],
      time: 1755167200000,
    },
    "email 13": {
      entityIds: ["smith-johnathan"],
      time: { start: 1755167400000, end: 1755168660000 },
    },
    "email 14": {
      entityIds: ["mckenzie-andrew"],
      time: { start: 1755163060000, end: 1755166060000 },
    },
    "email 15": {
      entityIds: ["mckenzie-andrew"],
      time: { start: 1755166060000, end: 1755166260000 },
    },
    "email 16": {
      entityIds: ["mckenzie-andrew"],
      time: { start: 1755166260000, end: 1755166560000 },
    },
    "email 17": {
      entityIds: ["mckenzie-andrew"],
      time: 1755168560000,
    },
    "email 18": {
      entityIds: ["mckenzie-andrew", "roberts-nathaniel"],
      time: 1755168860000,
    },
    "email 19": {
      entityIds: ["mckenzie-andrew", "roberts-nathaniel"],
      time: 1755155560000,
    },
    "email 20": {
      entityIds: ["mckenzie-andrew", "roberts-nathaniel"],
      time: 1755168960000,
    },
    "email 21": {
      entityIds: ["mckenzie-andrew", "roberts-nathaniel"],
      time: 1755169060000,
    },
  },
};
<!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.