Search

Styling Glyphs

Entities

Style glyphs decorating entities and entity type labels.

Styling Glyphs
View live example →

Use the controls below the timeline to change the properties of glyphs and typeGlyphs.

See also:

import { createTimeline } from "kronograph";
import { teams, eventData } from "./data";

const groupFontIcon = {
  text: "\uf0c0",
  fontFamily: "Font Awesome 5 Free",
  fontWeight: 900,
  color: "white",
};

const fontIconText = {
  person: "\uf007",
  star: "\uf005",
  house: "\uf015",
};

function makeTimelineData(glyph, applyTo, showTypeGlyphs) {
  const entities = {};
  const events = {};
  const entityTypes = {
    default: {},
    east: { typeLabel: "East Team" },
    west: { typeLabel: "West Team" },
  };

  Object.entries(teams).forEach(([name, team]) => {
    entities[name] = { type: team };
  });

  eventData.forEach(([time, ...entityIds], index) => {
    events[`event${index}`] = { time, entityIds };
  });

  (entities[applyTo] ?? entityTypes[applyTo]).glyph = glyph;

  if (showTypeGlyphs) {
    entityTypes.west.typeGlyph = { color: "#e12d39", fontIcon: groupFontIcon };
    entityTypes.east.typeGlyph = { color: "#1bbc9b", fontIcon: groupFontIcon };
  }

  return { entities, events, entityTypes, ordering: "alphabetical" };
}

function selectValue(id) {
  return document.getElementById(id).value;
}

function loadTimelineData() {
  const fontIcon = selectValue("font-icon");
  const showTypeGlyphs = selectValue("type-glyphs") === "show";

  const glyph = { color: selectValue("color") };

  if (fontIcon !== "none") {
    glyph.fontIcon = {
      fontFamily: "Font Awesome 5 Free",
      fontWeight: 900,
      text: fontIconText[fontIcon],
      scale: Number(selectValue("icon-scale")),
    };
  }

  const timelineData = makeTimelineData(glyph, selectValue("apply-to"), showTypeGlyphs);
  timeline.options({ entities: { glyphPosition: selectValue("position") } });
  timeline.set(timelineData);
  timeline.fit();
}

const timeline = createTimeline("my-timeline");
document.getElementById("story-controls").addEventListener("input", loadTimelineData);
loadTimelineData();
export const teams = {
  "Amanda Anderson": "east",
  "Ben Brown": "east",
  "Courtney Clark": "east",
  "Daniel Davis": "west",
  "Emily Evans": "west",
  "Francisco Flores": "west",
};

export const eventData = [
  [Date.UTC(2025, 1, 10, 8, 19, 32), "Courtney Clark", "Francisco Flores"],
  [Date.UTC(2025, 1, 10, 8, 29, 16), "Daniel Davis", "Emily Evans"],
  [Date.UTC(2025, 1, 10, 9, 21, 37), "Daniel Davis", "Ben Brown"],
  [Date.UTC(2025, 1, 10, 11, 34, 13), "Daniel Davis", "Courtney Clark"],
  [Date.UTC(2025, 1, 10, 15, 50, 51), "Emily Evans", "Amanda Anderson"],
  [Date.UTC(2025, 1, 10, 16, 59, 50), "Amanda Anderson", "Ben Brown"],
  [Date.UTC(2025, 1, 11, 8, 40, 49), "Daniel Davis", "Ben Brown"],
  [Date.UTC(2025, 1, 11, 10, 7, 38), "Amanda Anderson", "Emily Evans"],
  [Date.UTC(2025, 1, 11, 10, 37, 7), "Courtney Clark", "Daniel Davis"],
  [Date.UTC(2025, 1, 11, 11, 14, 9), "Francisco Flores", "Amanda Anderson"],
  [Date.UTC(2025, 1, 11, 12, 14, 15), "Courtney Clark", "Emily Evans"],
  [Date.UTC(2025, 1, 11, 13, 38, 10), "Ben Brown", "Courtney Clark"],
  [Date.UTC(2025, 1, 11, 13, 40, 30), "Amanda Anderson", "Emily Evans"],
  [Date.UTC(2025, 1, 11, 15, 57, 25), "Ben Brown", "Amanda Anderson"],
  [Date.UTC(2025, 1, 11, 16, 11, 53), "Courtney Clark", "Daniel Davis"],
  [Date.UTC(2025, 1, 11, 16, 53, 4), "Emily Evans", "Ben Brown"],
  [Date.UTC(2025, 1, 12, 10, 29, 48), "Daniel Davis", "Ben Brown"],
  [Date.UTC(2025, 1, 12, 10, 56, 13), "Courtney Clark", "Amanda Anderson"],
  [Date.UTC(2025, 1, 12, 13, 18, 7), "Francisco Flores", "Courtney Clark"],
  [Date.UTC(2025, 1, 12, 17, 52, 43), "Emily Evans", "Francisco Flores"],
  [Date.UTC(2025, 1, 13, 9, 23, 19), "Daniel Davis", "Courtney Clark"],
  [Date.UTC(2025, 1, 13, 10, 22, 21), "Courtney Clark", "Emily Evans"],
  [Date.UTC(2025, 1, 13, 11, 34, 33), "Francisco Flores", "Daniel Davis"],
  [Date.UTC(2025, 1, 13, 13, 26, 56), "Emily Evans", "Daniel Davis"],
  [Date.UTC(2025, 1, 13, 14, 33, 41), "Francisco Flores", "Ben Brown"],
  [Date.UTC(2025, 1, 14, 8, 56, 2), "Daniel Davis", "Courtney Clark"],
  [Date.UTC(2025, 1, 14, 9, 48, 8), "Francisco Flores", "Emily Evans"],
  [Date.UTC(2025, 1, 14, 12, 23, 24), "Amanda Anderson", "Ben Brown"],
  [Date.UTC(2025, 1, 14, 17, 16, 13), "Courtney Clark", "Ben Brown"],
  [Date.UTC(2025, 1, 14, 17, 22, 41), "Amanda Anderson", "Ben Brown"],
];
<!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 id="story-controls" class="story__controls story__controls--row">
        <div class="stack">
          <div class="story__controls__item">
            <label for="apply-to">Apply To</label>
            <select id="apply-to" class="select">
              <option value="Amanda Anderson">Amanda</option>
              <option value="Daniel Davis">Daniel</option>
              <option value="east">East Team</option>
              <option value="west">West Team</option>
              <option value="default">All</option>
            </select>
          </div>
          <div class="story__controls__item">
            <label for="color">Color</label>
            <select id="color" class="select">
              <option value="#e12d39">Red</option>
              <option value="#1bbc9b">Green</option>
              <option value="#0286f2">Blue</option>
            </select>
          </div>
        </div>
        <div class="stack">
          <div class="story__controls__item">
            <label class="story__controls__item__child--flex-2" for="font-icon">Font Icon</label>
            <select id="font-icon" class="select">
              <option value="none">None</option>
              <option value="person">Person</option>
              <option value="star">Star</option>
              <option value="house">House</option>
            </select>
          </div>
          <div class="story__controls__item">
            <label class="story__controls__item__child--flex-2" for="icon-scale">Icon Size</label>
            <select id="icon-scale" class="select">
              <option value="0.8">Small</option>
              <option value="1" selected>Regular</option>
              <option value="1.3">Large</option>
            </select>
          </div>
        </div>
        <div class="stack">
          <div class="story__controls__item">
            <label class="story__controls__item__child--flex-2" for="position">Position</label>
            <select id="position" class="select">
              <option value="left">Left</option>
              <option value="right">Right</option>
            </select>
          </div>
          <div class="story__controls__item">
            <label class="story__controls__item__child--flex-2" for="type-glyphs"
              >Type Glyphs</label
            >
            <select id="type-glyphs" class="select">
              <option value="show">Show</option>
              <option value="hide" selected>Hide</option>
            </select>
          </div>
        </div>
      </div>
    </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 { teams, eventData } from "./data";

const groupFontIcon = {
  text: "\uf0c0",
  fontFamily: "Font Awesome 5 Free",
  fontWeight: 900,
  color: "white",
};

const fontIconText = {
  person: "\uf007",
  star: "\uf005",
  house: "\uf015",
};

export const Demo = () => {
  const [applyTo, setApplyTo] = useState("Amanda Anderson");
  const [glyphColor, setGlyphColor] = useState("#e12d39");
  const [fontIcon, setFontIcon] = useState("none");
  const [scale, setScale] = useState(1);
  const [glyphPosition, setGlyphPosition] = useState("left");
  const [showTypeGlyphs, setShowTypeGlyphs] = useState(false);

  const entities = {};
  const events = {};
  const entityTypes = {
    default: {},
    east: { typeLabel: "East Team" },
    west: { typeLabel: "West Team" },
  };

  const glyph = { color: glyphColor };

  if (fontIcon !== "none") {
    glyph.fontIcon = {
      fontFamily: "Font Awesome 5 Free",
      fontWeight: 900,
      text: fontIconText[fontIcon],
      scale,
    };
  }

  Object.entries(teams).forEach(([name, team]) => {
    entities[name] = { type: team };
  });

  eventData.forEach(([time, ...entityIds], index) => {
    events[`event${index}`] = { time, entityIds };
  });

  (entities[applyTo] ?? entityTypes[applyTo]).glyph = glyph;

  if (showTypeGlyphs) {
    entityTypes.west.typeGlyph = { color: "#e12d39", fontIcon: groupFontIcon };
    entityTypes.east.typeGlyph = { color: "#1bbc9b", fontIcon: groupFontIcon };
  }

  const options = { entities: { glyphPosition } };

  return (
    <div className="story">
      <Timeline
        className="story__timeline"
        entities={entities}
        events={events}
        entityTypes={entityTypes}
        options={options}
        ordering="alphabetical"
      />

      <div className="story__controls story__controls--row">
        <div className="stack">
          <div className="story__controls__item">
            <label htmlFor="apply-to">Apply To</label>
            <select
              id="apply-to"
              className="select"
              onChange={(e) => {
                setApplyTo(e.target.value);
              }}
            >
              <option value="Amanda Anderson">Amanda</option>
              <option value="Daniel Davis">Daniel</option>
              <option value="east">East Team</option>
              <option value="west">West Team</option>
              <option value="default">All</option>
            </select>
          </div>
          <div className="story__controls__item">
            <label htmlFor="color">Color</label>
            <select
              id="color"
              className="select"
              onChange={(e) => {
                setGlyphColor(e.target.value);
              }}
            >
              <option value="#e12d39">Red</option>
              <option value="#1bbc9b">Green</option>
              <option value="#0286f2">Blue</option>
            </select>
          </div>
        </div>
        <div className="stack">
          <div className="story__controls__item">
            <label className="story__controls__item__child--flex-2" htmlFor="font-icon">
              Font Icon
            </label>
            <select
              id="font-icon"
              className="select"
              onChange={(e) => {
                setFontIcon(e.target.value);
              }}
            >
              <option value="none">None</option>
              <option value="person">Person</option>
              <option value="star">Star</option>
              <option value="house">House</option>
            </select>
          </div>
          <div className="story__controls__item">
            <label className="story__controls__item__child--flex-2" htmlFor="icon-scale">
              Icon Size
            </label>
            <select
              id="icon-scale"
              className="select"
              defaultValue="1"
              onChange={(e) => {
                setScale(Number(e.target.value));
              }}
            >
              <option value="0.8">Small</option>
              <option value="1">Regular</option>
              <option value="1.3">Large</option>
            </select>
          </div>
        </div>
        <div className="stack">
          <div className="story__controls__item">
            <label className="story__controls__item__child--flex-2" htmlFor="position">
              Position
            </label>
            <select
              id="position"
              className="select"
              onChange={(e) => {
                setGlyphPosition(e.target.value);
              }}
            >
              <option value="left">Left</option>
              <option value="right">Right</option>
            </select>
          </div>
          <div className="story__controls__item">
            <label className="story__controls__item__child--flex-2" htmlFor="type-glyphs">
              Type Glyphs
            </label>
            <select
              id="position"
              className="select"
              defaultValue="hide"
              onChange={(e) => {
                setShowTypeGlyphs(e.target.value === "show");
              }}
            >
              <option value="show">Show</option>
              <option value="hide">Hide</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);
export const teams = {
  "Amanda Anderson": "east",
  "Ben Brown": "east",
  "Courtney Clark": "east",
  "Daniel Davis": "west",
  "Emily Evans": "west",
  "Francisco Flores": "west",
};

export const eventData = [
  [Date.UTC(2025, 1, 10, 8, 19, 32), "Courtney Clark", "Francisco Flores"],
  [Date.UTC(2025, 1, 10, 8, 29, 16), "Daniel Davis", "Emily Evans"],
  [Date.UTC(2025, 1, 10, 9, 21, 37), "Daniel Davis", "Ben Brown"],
  [Date.UTC(2025, 1, 10, 11, 34, 13), "Daniel Davis", "Courtney Clark"],
  [Date.UTC(2025, 1, 10, 15, 50, 51), "Emily Evans", "Amanda Anderson"],
  [Date.UTC(2025, 1, 10, 16, 59, 50), "Amanda Anderson", "Ben Brown"],
  [Date.UTC(2025, 1, 11, 8, 40, 49), "Daniel Davis", "Ben Brown"],
  [Date.UTC(2025, 1, 11, 10, 7, 38), "Amanda Anderson", "Emily Evans"],
  [Date.UTC(2025, 1, 11, 10, 37, 7), "Courtney Clark", "Daniel Davis"],
  [Date.UTC(2025, 1, 11, 11, 14, 9), "Francisco Flores", "Amanda Anderson"],
  [Date.UTC(2025, 1, 11, 12, 14, 15), "Courtney Clark", "Emily Evans"],
  [Date.UTC(2025, 1, 11, 13, 38, 10), "Ben Brown", "Courtney Clark"],
  [Date.UTC(2025, 1, 11, 13, 40, 30), "Amanda Anderson", "Emily Evans"],
  [Date.UTC(2025, 1, 11, 15, 57, 25), "Ben Brown", "Amanda Anderson"],
  [Date.UTC(2025, 1, 11, 16, 11, 53), "Courtney Clark", "Daniel Davis"],
  [Date.UTC(2025, 1, 11, 16, 53, 4), "Emily Evans", "Ben Brown"],
  [Date.UTC(2025, 1, 12, 10, 29, 48), "Daniel Davis", "Ben Brown"],
  [Date.UTC(2025, 1, 12, 10, 56, 13), "Courtney Clark", "Amanda Anderson"],
  [Date.UTC(2025, 1, 12, 13, 18, 7), "Francisco Flores", "Courtney Clark"],
  [Date.UTC(2025, 1, 12, 17, 52, 43), "Emily Evans", "Francisco Flores"],
  [Date.UTC(2025, 1, 13, 9, 23, 19), "Daniel Davis", "Courtney Clark"],
  [Date.UTC(2025, 1, 13, 10, 22, 21), "Courtney Clark", "Emily Evans"],
  [Date.UTC(2025, 1, 13, 11, 34, 33), "Francisco Flores", "Daniel Davis"],
  [Date.UTC(2025, 1, 13, 13, 26, 56), "Emily Evans", "Daniel Davis"],
  [Date.UTC(2025, 1, 13, 14, 33, 41), "Francisco Flores", "Ben Brown"],
  [Date.UTC(2025, 1, 14, 8, 56, 2), "Daniel Davis", "Courtney Clark"],
  [Date.UTC(2025, 1, 14, 9, 48, 8), "Francisco Flores", "Emily Evans"],
  [Date.UTC(2025, 1, 14, 12, 23, 24), "Amanda Anderson", "Ben Brown"],
  [Date.UTC(2025, 1, 14, 17, 16, 13), "Courtney Clark", "Ben Brown"],
  [Date.UTC(2025, 1, 14, 17, 22, 41), "Amanda Anderson", "Ben Brown"],
];
<!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.