Search

Styling Annotations

Annotations

Customize annotation appearance with several styling options.

Styling Annotations
View live example →

Style the annotation using the settings below the timeline.

Use the options in the annotation API to apply them in your timeline.

See also:

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

function isNumericString(str) {
  return !Number.isNaN(+str);
}

function byId(id) {
  return document.getElementById(id);
}

function selectValue(id) {
  const { value } = byId(id);
  if (value === "null") {
    return null;
  }
  if (value === "undefined") {
    return undefined;
  }
  return isNumericString(value) ? +value : value;
}

const timeline = createTimeline("my-timeline");

const timelineOptions = {
  backgroundColor: "#2a333c",
  entities: {
    showLines: "individualEvents",
  },
  events: {
    heatmapPadding: true,
    heatmapThreshold: 15,
    heatmapValue: "amount",
    heatmapColor: [
      { eventType: "warning", color: "#fa8072" },
      { eventType: "alert", color: "#fa8072" },
      { eventType: "default", color: "#00a2ed" },
    ],
  },
};

const baseSampleEventAnnotations = {
  emails5and6: { subject: ["event37", "event0"], label: "These transactions have warnings" },
};

function getAnnotationPropertiesFromControls() {
  const connectorStyle = {
    container: selectValue("container-select"),
    lineStyle: selectValue("connection-style-select"),
    subjectEnd: selectValue("subject-end-select"),
  };
  const positionSelect = selectValue("position-select");
  const position = {
    angle: positionSelect === "top" ? "top" : positionSelect === "bottom" ? "bottom" : "ne",
  };
  const borderColor = selectValue("border-color-select");
  const annotationProperties = {
    borderStyle: selectValue("border-style-select"),
    connectorStyle,
    position,
  };
  if (borderColor !== undefined) {
    annotationProperties.borderColor = borderColor;
    annotationProperties.borderWidth = 2;
  }

  const fillColor = selectValue("color-select");
  if (fillColor !== undefined) {
    annotationProperties.fillColor = fillColor;
  }

  return annotationProperties;
}

function reloadAnnotations() {
  const annotationProperties = getAnnotationPropertiesFromControls();

  const sampleEventAnnotations = Object.fromEntries(
    Object.entries(baseSampleEventAnnotations).map(([k, v]) => [
      k,
      { ...v, ...annotationProperties },
    ])
  );

  timeline.annotations({ ...sampleEventAnnotations });
}

timeline.options(timelineOptions);
timeline.set(data);
const annotatedEvents = Object.values(baseSampleEventAnnotations).flatMap(({ subject }) => subject);
timeline.reveal(annotatedEvents);
reloadAnnotations();
timeline.fit();

byId("border-color-select")?.addEventListener("input", () => {
  byId("border-style-select").disabled = selectValue("border-color-select") === undefined;
});
byId("annotation-controls")?.addEventListener("change", reloadAnnotations);
export default {
  entities: {
    "Aurora Bancorp": {
      color: "#4e79a7",
    },
    "Better Life Bank": {
      color: "#f28e2c",
    },
    "Ace Financial Group": {
      color: "#e15759",
    },
    "Grand Mutual Bank": {
      color: "#76b7b2",
    },
    "Felicity Financial Services": {
      color: "#59a14f",
    },
  },
  events: {
    event0: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: -103,
      },
      time: 1716845042401.983,
      type: "warning",
    },
    event1: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1522,
      },
      time: 1704300247970.444,
    },
    event2: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 2519,
      },
      time: 1704826361998.4548,
    },
    event3: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1744,
      },
      time: 1721561387584.9785,
    },
    event4: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1292,
      },
      time: 1721436187577.0662,
    },
    event5: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1913,
      },
      time: 1715184891178.0125,
    },
    event6: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1379,
      },
      time: 1720022197785.7358,
    },
    event7: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 2108,
      },
      time: 1713047293850.0168,
    },
    event8: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 39987,
      },
      time: 1719556922296.1238,
    },
    event9: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 6269,
      },
      time: 1717726178569.1255,
    },
    event10: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 4629,
      },
      time: 1718167137411.861,
    },
    event11: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 4112,
      },
      time: 1719690540773.6128,
    },
    event12: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 44477,
      },
      time: 1718653783292.392,
    },
    event13: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 86674,
      },
      time: 1719055763972.7158,
    },
    event14: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 96953,
      },
      time: 1718812764374.0154,
    },
    event15: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 57831,
      },
      type: "alert",
      time: 1717355969771.8218,
    },
    event16: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 1992,
      },
      time: 1721029217990.7224,
    },
    event17: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 471,
      },
      time: 1722545977814.828,
    },
    event18: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 2274,
      },
      time: 1712785338304.0298,
    },
    event19: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 3067,
      },
      time: 1706715885813.1304,
    },
    event20: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: -670,
      },
      time: 1705034721408.0198,
    },
    event21: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: -648,
      },
      time: 1719489884462.4038,
    },
    event22: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 325,
      },
      time: 1721614571235.6663,
    },
    event23: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 851,
      },
      time: 1705237236251.1895,
    },
    event24: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 3121,
      },
      time: 1721380170448.32,
    },
    event25: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: -1778,
      },
      time: 1719476838892.334,
    },
    event26: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 3781,
      },
      time: 1714459016034.4941,
    },
    event27: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1165,
      },
      time: 1713136401986.9214,
    },
    event28: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 2237,
      },
      time: 1712559528845.578,
    },
    event29: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1535,
      },
      time: 1720931783679.7734,
    },
    event30: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: -1622,
      },
      time: 1721528143853.7964,
    },
    event31: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 523,
      },
      time: 1709514478039.349,
    },
    event32: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1257,
      },
      time: 1715409427247.5706,
    },
    event33: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 736,
      },
      time: 1707482336867.2246,
    },
    event34: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 184,
      },
      time: 1725199319145.929,
    },
    event35: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1058,
      },
      time: 1713232568113.0273,
    },
    event36: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1429,
      },
      time: 1721868788309.195,
    },
    event37: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: -5097,
      },
      type: "warning",
      time: 1707839323010.2188,
    },
    event38: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 2522,
      },
      time: 1717712034817.7363,
    },
    event39: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 3094,
      },
      time: 1724919209625.5513,
    },
    event40: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1121,
      },
      time: 1718493292818.4546,
    },
    event41: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 2878,
      },
      time: 1714709244615.406,
    },
    event42: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1504,
      },
      time: 1715372672224.4255,
    },
    event43: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 320,
      },
      time: 1710331215554.826,
    },
    event44: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1906,
      },
      time: 1710184345462.6362,
    },
    event45: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: -1246,
      },
      time: 1725198486655.9883,
    },
    event46: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: -1476,
      },
      time: 1706451804586.463,
    },
    event47: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: -192,
      },
      time: 1723811742494.3857,
    },
  },
  eventTypes: {
    alert: {
      color: "red",
    },
    warning: {
      color: "yellow",
    },
    default: {
      color: "grey",
    },
  },
};
<!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="annotation-controls">
        <div class="story__controls--row">
          <div class="story__controls__heading">Annotation Body Settings</div>
        </div>
        <div class="story__controls--row story__controls">
          <div class="stack">
            <div class="story__controls__item">
              <label for="border-color-select">Border color</label>
              <select id="border-color-select" class="select">
                <option value="undefined" selected>Default border (none)</option>
                <option value="#2676c7">Blue border</option>
                <option value="#ff6d66">Orange border</option>
                <option value="#ffffff">White border</option>
              </select>
            </div>
            <div class="story__controls__item">
              <label for="border-style-select">Border style</label>
              <select id="border-style-select" class="select" disabled>
                <option value="solid" selected>Solid border</option>
                <option value="dashed">Dashed border</option>
              </select>
            </div>
          </div>
          <div class="stack">
            <div class="story__controls__item">
              <label for="color-select">Color</label>
              <select id="color-select" class="select">
                <option value="undefined" selected>Default body color</option>
                <option value="rgba(0,0,0,0)">Transparent</option>
                <option value="rgba(255,255,255,0.4)">White with 0.4 alpha</option>
                <option value="rgba(0,0,0,0.7)">Black with 0.7 alpha</option>
                <option value="#404040">Grey</option>
              </select>
            </div>
            <div class="story__controls__item">
              <label for="position-select">Position</label>
              <select id="position-select" class="select">
                <option value="top" selected>Top</option>
                <option value="bottom">Bottom</option>
                <option value="ne">Free</option>
              </select>
            </div>
          </div>
        </div>

        <div class="story__controls--row">
          <div class="story__controls__heading">Annotation Connector Settings</div>
        </div>
        <div class="story__controls story__controls--row">
          <div class="story__controls__item">
            <label for="connection-style-select">Connection style</label>
            <select id="connection-style-select" class="select">
              <option value="solid" selected>Solid container lines</option>
              <option value="dashed">Dashed container lines</option>
            </select>
          </div>

          <div class="story__controls__item">
            <select id="container-select" class="select">
              <option value="none">No container</option>
              <option value="rectangle">Box container</option>
              <option value="roundrect" selected>Rounded container</option>
            </select>
          </div>

          <div class="story__controls__item">
            <select id="subject-end-select" class="select">
              <option value="none">No subject end</option>
              <option value="arrow">Arrow subject end</option>
              <option value="circle" selected>Circle subject end</option>
              <option value="dot">Dot subject end</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="./code.js"></script>
  </body>
</html>
import React, { useState, useRef } from "react";
import { createRoot } from "react-dom/client";
import data from "./data";
import Timeline from "kronograph/react/Timeline";

function isNumericString(str) {
  return !Number.isNaN(+str);
}

function selectValue(ref) {
  const value = ref.current?.value;
  if (value === "null") {
    return null;
  }
  if (value === "undefined") {
    return undefined;
  }
  return isNumericString(value) ? +value : value;
}

const timelineOptions = {
  backgroundColor: "#2a333c",
  entities: {
    showLines: "individualEvents",
  },
  events: {
    heatmapPadding: true,
    heatmapThreshold: 15,
    heatmapValue: "amount",
    heatmapColor: [
      { eventType: "warning", color: "#fa8072" },
      { eventType: "alert", color: "#fa8072" },
      { eventType: "default", color: "#00a2ed" },
    ],
  },
};

const baseAnnotations = {
  emails5and6: { subject: ["event37", "event0"], label: "These transactions have warnings" },
};

export const Demo = () => {
  const containerSelect = useRef(null);
  const connectionStyleSelect = useRef(null);
  const positionSelect = useRef(null);
  const subjectEndSelect = useRef(null);
  const borderColorSelect = useRef(null);
  const borderStyleSelect = useRef(null);
  const colorSelect = useRef(null);

  const annotatedEventsToReveal = Object.values(baseAnnotations).flatMap(({ subject }) => subject);
  const [annotations, setAnnotations] = useState(baseAnnotations);

  function reloadAnnotations() {
    const annotationProperties = {
      connectorStyle: {
        container: selectValue(containerSelect),
        lineStyle: selectValue(connectionStyleSelect),
        subjectEnd: selectValue(subjectEndSelect),
      },
      position: {
        angle: selectValue(positionSelect),
      },
      borderStyle: selectValue(borderStyleSelect),
    };

    if (selectValue(borderColorSelect) !== undefined) {
      annotationProperties.borderColor = selectValue(borderColorSelect);
      annotationProperties.borderWidth = 2;
    }

    if (selectValue(colorSelect) !== undefined) {
      annotationProperties.fillColor = selectValue(colorSelect);
    }

    const eventAnnotations = Object.fromEntries(
      Object.entries(baseAnnotations).map(([k, v]) => [k, { ...v, ...annotationProperties }])
    );

    setAnnotations(eventAnnotations);
  }

  return (
    <div className="story">
      <Timeline
        entities={data.entities}
        events={data.events}
        eventTypes={data.eventTypes}
        annotations={annotations}
        reveal={annotatedEventsToReveal}
        options={timelineOptions}
        className="story__timeline"
      />
      <div id="annotation-controls" onChange={reloadAnnotations}>
        <div className="story__controls--row">
          <div className="story__controls__heading">Annotation Body Settings</div>
        </div>
        <div className="story__controls--row story__controls">
          <div className="stack">
            <div className="story__controls__item">
              <label htmlFor="border-color-select">Border color</label>
              <select id="border-color-select" className="select" ref={borderColorSelect}>
                <option value="undefined" selected>
                  Default border (none)
                </option>
                <option value="#2676c7">Blue border</option>
                <option value="#ff6d66">Orange border</option>
                <option value="#ffffff">White border</option>
              </select>
            </div>
            <div className="story__controls__item">
              <label htmlFor="border-style-select">Border style</label>
              <select
                id="border-style-select"
                className="select"
                disabled={selectValue(borderColorSelect) === undefined}
                ref={borderStyleSelect}
              >
                <option value="solid" selected>
                  Solid border
                </option>
                <option value="dashed">Dashed border</option>
              </select>
            </div>
          </div>
          <div className="stack">
            <div className="story__controls__item">
              <label htmlFor="color-select">Color</label>
              <select id="color-select" className="select" ref={colorSelect}>
                <option value="undefined" selected>
                  Default body color
                </option>
                <option value="rgba(0,0,0,0)">Transparent</option>
                <option value="rgba(255,255,255,0.4)">White with 0.4 alpha</option>
                <option value="rgba(0,0,0,0.7)">Black with 0.7 alpha</option>
                <option value="#404040">Grey</option>
              </select>
            </div>
            <div className="story__controls__item">
              <label htmlFor="position-select">Position</label>
              <select id="position-select" className="select" ref={positionSelect}>
                <option value="top" selected>
                  Top
                </option>
                <option value="bottom">Bottom</option>
                <option value="ne">Free</option>
              </select>
            </div>
          </div>
        </div>
        <div className="story__controls--row">
          <div className="story__controls__heading">Annotation Connector Settings</div>
        </div>
        <div className="story__controls--row story__controls">
          <div className="story__controls__item">
            <label htmlFor="connection-style-select">Connection style</label>
            <select id="connection-style-select" className="select" ref={connectionStyleSelect}>
              <option value="solid" selected>
                Solid container lines
              </option>
              <option value="dashed">Dashed container lines</option>
            </select>
          </div>
          <div className="story__controls__item">
            <select id="container-select" className="select" ref={containerSelect}>
              <option value="none">No container</option>
              <option value="rectangle">Box container</option>
              <option value="roundrect" selected>
                Rounded container
              </option>
            </select>
          </div>
          <div className="story__controls__item">
            <select id="subject-end-select" className="select" ref={subjectEndSelect}>
              <option value="none">No subject end</option>
              <option value="arrow">Arrow subject end</option>
              <option value="circle" selected>
                Circle subject end
              </option>
              <option value="dot">Dot subject end</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);
export default {
  entities: {
    "Aurora Bancorp": {
      color: "#4e79a7",
    },
    "Better Life Bank": {
      color: "#f28e2c",
    },
    "Ace Financial Group": {
      color: "#e15759",
    },
    "Grand Mutual Bank": {
      color: "#76b7b2",
    },
    "Felicity Financial Services": {
      color: "#59a14f",
    },
  },
  events: {
    event0: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: -103,
      },
      time: 1716845042401.983,
      type: "warning",
    },
    event1: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1522,
      },
      time: 1704300247970.444,
    },
    event2: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 2519,
      },
      time: 1704826361998.4548,
    },
    event3: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1744,
      },
      time: 1721561387584.9785,
    },
    event4: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1292,
      },
      time: 1721436187577.0662,
    },
    event5: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1913,
      },
      time: 1715184891178.0125,
    },
    event6: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1379,
      },
      time: 1720022197785.7358,
    },
    event7: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 2108,
      },
      time: 1713047293850.0168,
    },
    event8: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 39987,
      },
      time: 1719556922296.1238,
    },
    event9: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 6269,
      },
      time: 1717726178569.1255,
    },
    event10: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 4629,
      },
      time: 1718167137411.861,
    },
    event11: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 4112,
      },
      time: 1719690540773.6128,
    },
    event12: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 44477,
      },
      time: 1718653783292.392,
    },
    event13: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 86674,
      },
      time: 1719055763972.7158,
    },
    event14: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 96953,
      },
      time: 1718812764374.0154,
    },
    event15: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 57831,
      },
      type: "alert",
      time: 1717355969771.8218,
    },
    event16: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 1992,
      },
      time: 1721029217990.7224,
    },
    event17: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 471,
      },
      time: 1722545977814.828,
    },
    event18: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 2274,
      },
      time: 1712785338304.0298,
    },
    event19: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 3067,
      },
      time: 1706715885813.1304,
    },
    event20: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: -670,
      },
      time: 1705034721408.0198,
    },
    event21: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: -648,
      },
      time: 1719489884462.4038,
    },
    event22: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 325,
      },
      time: 1721614571235.6663,
    },
    event23: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 851,
      },
      time: 1705237236251.1895,
    },
    event24: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 3121,
      },
      time: 1721380170448.32,
    },
    event25: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: -1778,
      },
      time: 1719476838892.334,
    },
    event26: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 3781,
      },
      time: 1714459016034.4941,
    },
    event27: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1165,
      },
      time: 1713136401986.9214,
    },
    event28: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 2237,
      },
      time: 1712559528845.578,
    },
    event29: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1535,
      },
      time: 1720931783679.7734,
    },
    event30: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: -1622,
      },
      time: 1721528143853.7964,
    },
    event31: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 523,
      },
      time: 1709514478039.349,
    },
    event32: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1257,
      },
      time: 1715409427247.5706,
    },
    event33: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 736,
      },
      time: 1707482336867.2246,
    },
    event34: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 184,
      },
      time: 1725199319145.929,
    },
    event35: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1058,
      },
      time: 1713232568113.0273,
    },
    event36: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1429,
      },
      time: 1721868788309.195,
    },
    event37: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: -5097,
      },
      type: "warning",
      time: 1707839323010.2188,
    },
    event38: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 2522,
      },
      time: 1717712034817.7363,
    },
    event39: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 3094,
      },
      time: 1724919209625.5513,
    },
    event40: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1121,
      },
      time: 1718493292818.4546,
    },
    event41: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 2878,
      },
      time: 1714709244615.406,
    },
    event42: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1504,
      },
      time: 1715372672224.4255,
    },
    event43: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 320,
      },
      time: 1710331215554.826,
    },
    event44: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1906,
      },
      time: 1710184345462.6362,
    },
    event45: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: -1246,
      },
      time: 1725198486655.9883,
    },
    event46: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: -1476,
      },
      time: 1706451804586.463,
    },
    event47: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: -192,
      },
      time: 1723811742494.3857,
    },
  },
  eventTypes: {
    alert: {
      color: "red",
    },
    warning: {
      color: "yellow",
    },
    default: {
      color: "grey",
    },
  },
};
<!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.