Search

Time Series Charts

Time Series Charts

Visualize continuous data over time to correlate trends with activity.

Time Series Charts
View live example →

Time series charts allow you to add one or more continuous time series data to your timeline.

Time series charts share the timeline's scale, aligning continuous data (e.g. network performance) with the events displayed by the timeline (e.g. interaction between devices).

The time series charts are shown here in a stack.

See also:

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

const timeline = createTimeline("my-timeline");
timeline.options({
  timeSeriesCharts: {
    sizePercent: 75,
  },
});
timeline.set(data);
timeline.fit();
export default {
  entities: {
    "192.168.1.5": {},
    "192.168.1.6": {},
    "172.16.32.4": {},
    "172.16.32.89": {},
  },
  events: {
    1: {
      entityIds: ["172.16.32.89", "192.168.1.5"],
      time: Date.UTC(2021, 7, 19, 11, 33, 35, 459),
    },
    2: {
      entityIds: ["192.168.1.6", "172.16.32.4"],
      time: Date.UTC(2021, 7, 19, 11, 36, 6, 112),
    },
    3: {
      entityIds: ["192.168.1.5", "192.168.1.6"],
      time: Date.UTC(2021, 7, 19, 11, 38, 13, 819),
    },
    4: {
      entityIds: ["172.16.32.89", "172.16.32.4"],
      time: Date.UTC(2021, 7, 19, 11, 38, 54, 240),
    },
    5: {
      entityIds: ["172.16.32.89", "192.168.1.6"],
      time: Date.UTC(2021, 7, 19, 11, 42, 44, 447),
    },
    6: {
      entityIds: ["172.16.32.89", "172.16.32.4"],
      time: Date.UTC(2021, 7, 19, 11, 46, 49, 421),
    },
    7: {
      entityIds: ["172.16.32.89", "192.168.1.5"],
      time: Date.UTC(2021, 7, 19, 11, 49, 22, 184),
    },
    8: {
      entityIds: ["172.16.32.4", "172.16.32.89"],
      time: Date.UTC(2021, 7, 19, 11, 53, 3, 266),
    },
  },
  timeSeriesCharts: {
    latency: {
      color: "#c21f1f",
      type: "step",
      fillAreaAlpha: 0,
      data: [
        { time: Date.UTC(2021, 7, 19, 11, 31, 15, 131), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 31, 21, 796), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 31, 41, 960), value: 27 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 5, 809), value: 25 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 39, 572), value: 27.5 },
        { time: Date.UTC(2021, 7, 19, 11, 33, 35, 459), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 34, 15, 89), value: 27 },
        { time: Date.UTC(2021, 7, 19, 11, 35, 20, 345), value: 26 },
        { time: Date.UTC(2021, 7, 19, 11, 36, 6, 112), value: 23 },
        { time: Date.UTC(2021, 7, 19, 11, 36, 6, 298), value: 22 },
        { time: Date.UTC(2021, 7, 19, 11, 37, 6, 503), value: 24 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 13, 819), value: 24.5 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 30, 447), value: 24 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 32, 501), value: 23.5 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 0, 815), value: 22 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 3, 424), value: 21.5 },
        { time: Date.UTC(2021, 7, 19, 11, 40, 42, 803), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 1, 835), value: 27 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 32, 78), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 49, 589), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 33, 664), value: 27 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 47, 674), value: 26.5 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 22, 184), value: 24.8 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 47, 921), value: 23 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 6, 794), value: 23 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 9, 769), value: 22 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 14, 358), value: 22.5 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 27, 572), value: 21 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 40, 573), value: 21 },
        { time: Date.UTC(2021, 7, 19, 11, 46, 3, 266), value: 20.5 },
        { time: Date.UTC(2021, 7, 19, 11, 46, 6, 218), value: 20.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 12, 758), value: 19.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 14, 47), value: 19 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 19, 825), value: 22 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 31, 184), value: 21 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 56, 779), value: 22 },
        { time: Date.UTC(2021, 7, 19, 11, 49, 23, 739), value: 22.5 },
        { time: Date.UTC(2021, 7, 19, 11, 50, 6, 565), value: 21 },
        { time: Date.UTC(2021, 7, 19, 11, 50, 14, 735), value: 23 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 16, 5), value: 27 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 17, 509), value: 26.5 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 37, 194), value: 27.5 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 8, 968), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 47, 269), value: 27 },
      ],
    },
    bandwidth: {
      color: "#f7d06e",
      fillAreaAlpha: 0.05,
      data: [
        { time: Date.UTC(2021, 7, 19, 11, 31, 15, 131), value: 33 },
        { time: Date.UTC(2021, 7, 19, 11, 31, 21, 796), value: 42 },
        { time: Date.UTC(2021, 7, 19, 11, 31, 41, 960), value: 37 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 5, 809), value: 45 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 39, 572), value: 34.5 },
        { time: Date.UTC(2021, 7, 19, 11, 33, 35, 459), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 34, 15, 89), value: 43 },
        { time: Date.UTC(2021, 7, 19, 11, 35, 20, 345), value: 36 },
        { time: Date.UTC(2021, 7, 19, 11, 36, 6, 112), value: 33 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 30, 447), value: 34 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 32, 501), value: 33.5 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 0, 815), value: 32 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 3, 424), value: 31.5 },
        { time: Date.UTC(2021, 7, 19, 11, 40, 42, 803), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 1, 835), value: 37 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 32, 78), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 44, 447), value: 38.5 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 49, 421), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 49, 589), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 33, 664), value: 37 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 47, 674), value: 36.5 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 12, 81), value: 35 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 22, 184), value: 34.8 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 47, 921), value: 33 },
        { time: Date.UTC(2021, 7, 19, 11, 44, 45, 503), value: 34 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 6, 794), value: 33 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 9, 769), value: 32 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 14, 358), value: 32.5 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 27, 572), value: 31 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 40, 573), value: 31 },
        { time: Date.UTC(2021, 7, 19, 11, 46, 3, 266), value: 30.5 },
        { time: Date.UTC(2021, 7, 19, 11, 46, 6, 218), value: 30.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 12, 758), value: 29.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 14, 47), value: 29 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 19, 825), value: 32 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 31, 184), value: 31 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 56, 779), value: 32 },
        { time: Date.UTC(2021, 7, 19, 11, 49, 23, 739), value: 32.5 },
        { time: Date.UTC(2021, 7, 19, 11, 50, 6, 565), value: 31 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 16, 5), value: 37 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 8, 968), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 47, 269), value: 37 },
      ],
    },
    packetLoss: {
      color: "#28c6d1",
      lineStyle: "dashed",
      fillAreaAlpha: 0.2,
      data: [
        { time: Date.UTC(2021, 7, 19, 11, 31, 15, 131), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 5, 809), value: 15 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 39, 572), value: 17.5 },
        { time: Date.UTC(2021, 7, 19, 11, 33, 35, 459), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 34, 15, 89), value: 17 },
        { time: Date.UTC(2021, 7, 19, 11, 35, 20, 345), value: 16 },
        { time: Date.UTC(2021, 7, 19, 11, 36, 6, 112), value: 13 },
        { time: Date.UTC(2021, 7, 19, 11, 36, 6, 298), value: 12 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 30, 447), value: 14 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 32, 501), value: 13.5 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 42, 325), value: 13 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 54, 240), value: 13 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 57, 553), value: 12 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 0, 815), value: 12 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 3, 424), value: 11.5 },
        { time: Date.UTC(2021, 7, 19, 11, 40, 42, 803), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 1, 835), value: 17 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 32, 78), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 44, 447), value: 18.5 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 49, 421), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 49, 589), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 33, 664), value: 17 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 47, 674), value: 16.5 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 12, 81), value: 15 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 22, 184), value: 14.8 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 47, 921), value: 13 },
        { time: Date.UTC(2021, 7, 19, 11, 44, 45, 503), value: 14 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 14, 358), value: 12.5 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 27, 572), value: 11 },
        { time: Date.UTC(2021, 7, 19, 11, 46, 6, 218), value: 10.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 12, 758), value: 9.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 14, 47), value: 9 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 40, 451), value: 10 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 51, 302), value: 11 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 9, 30), value: 10 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 19, 825), value: 12 },
        { time: Date.UTC(2021, 7, 19, 11, 49, 23, 739), value: 12.5 },
        { time: Date.UTC(2021, 7, 19, 11, 50, 6, 565), value: 11 },
        { time: Date.UTC(2021, 7, 19, 11, 50, 14, 735), value: 13 },
        { time: Date.UTC(2021, 7, 19, 11, 51, 53, 182), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 52, 50, 716), value: 29 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 16, 5), value: 17 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 17, 509), value: 13.5 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 37, 194), value: 17.5 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 8, 968), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 47, 269), value: 17 },
      ],
    },
  },
  timeSeriesChartStacks: {
    networkPerformance: {
      chartIds: ["latency", "bandwidth", "packetLoss"],
      label: "Network Performance",
    },
  },
};
<!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 from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import data from "./data";

export const Demo = () => (
  <Timeline {...data} options={{ timeSeriesCharts: { sizePercent: 75 } }} />
);

const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);
export default {
  entities: {
    "192.168.1.5": {},
    "192.168.1.6": {},
    "172.16.32.4": {},
    "172.16.32.89": {},
  },
  events: {
    1: {
      entityIds: ["172.16.32.89", "192.168.1.5"],
      time: Date.UTC(2021, 7, 19, 11, 33, 35, 459),
    },
    2: {
      entityIds: ["192.168.1.6", "172.16.32.4"],
      time: Date.UTC(2021, 7, 19, 11, 36, 6, 112),
    },
    3: {
      entityIds: ["192.168.1.5", "192.168.1.6"],
      time: Date.UTC(2021, 7, 19, 11, 38, 13, 819),
    },
    4: {
      entityIds: ["172.16.32.89", "172.16.32.4"],
      time: Date.UTC(2021, 7, 19, 11, 38, 54, 240),
    },
    5: {
      entityIds: ["172.16.32.89", "192.168.1.6"],
      time: Date.UTC(2021, 7, 19, 11, 42, 44, 447),
    },
    6: {
      entityIds: ["172.16.32.89", "172.16.32.4"],
      time: Date.UTC(2021, 7, 19, 11, 46, 49, 421),
    },
    7: {
      entityIds: ["172.16.32.89", "192.168.1.5"],
      time: Date.UTC(2021, 7, 19, 11, 49, 22, 184),
    },
    8: {
      entityIds: ["172.16.32.4", "172.16.32.89"],
      time: Date.UTC(2021, 7, 19, 11, 53, 3, 266),
    },
  },
  timeSeriesCharts: {
    latency: {
      color: "#c21f1f",
      type: "step",
      fillAreaAlpha: 0,
      data: [
        { time: Date.UTC(2021, 7, 19, 11, 31, 15, 131), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 31, 21, 796), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 31, 41, 960), value: 27 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 5, 809), value: 25 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 39, 572), value: 27.5 },
        { time: Date.UTC(2021, 7, 19, 11, 33, 35, 459), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 34, 15, 89), value: 27 },
        { time: Date.UTC(2021, 7, 19, 11, 35, 20, 345), value: 26 },
        { time: Date.UTC(2021, 7, 19, 11, 36, 6, 112), value: 23 },
        { time: Date.UTC(2021, 7, 19, 11, 36, 6, 298), value: 22 },
        { time: Date.UTC(2021, 7, 19, 11, 37, 6, 503), value: 24 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 13, 819), value: 24.5 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 30, 447), value: 24 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 32, 501), value: 23.5 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 0, 815), value: 22 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 3, 424), value: 21.5 },
        { time: Date.UTC(2021, 7, 19, 11, 40, 42, 803), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 1, 835), value: 27 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 32, 78), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 49, 589), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 33, 664), value: 27 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 47, 674), value: 26.5 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 22, 184), value: 24.8 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 47, 921), value: 23 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 6, 794), value: 23 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 9, 769), value: 22 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 14, 358), value: 22.5 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 27, 572), value: 21 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 40, 573), value: 21 },
        { time: Date.UTC(2021, 7, 19, 11, 46, 3, 266), value: 20.5 },
        { time: Date.UTC(2021, 7, 19, 11, 46, 6, 218), value: 20.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 12, 758), value: 19.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 14, 47), value: 19 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 19, 825), value: 22 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 31, 184), value: 21 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 56, 779), value: 22 },
        { time: Date.UTC(2021, 7, 19, 11, 49, 23, 739), value: 22.5 },
        { time: Date.UTC(2021, 7, 19, 11, 50, 6, 565), value: 21 },
        { time: Date.UTC(2021, 7, 19, 11, 50, 14, 735), value: 23 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 16, 5), value: 27 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 17, 509), value: 26.5 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 37, 194), value: 27.5 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 8, 968), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 47, 269), value: 27 },
      ],
    },
    bandwidth: {
      color: "#f7d06e",
      fillAreaAlpha: 0.05,
      data: [
        { time: Date.UTC(2021, 7, 19, 11, 31, 15, 131), value: 33 },
        { time: Date.UTC(2021, 7, 19, 11, 31, 21, 796), value: 42 },
        { time: Date.UTC(2021, 7, 19, 11, 31, 41, 960), value: 37 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 5, 809), value: 45 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 39, 572), value: 34.5 },
        { time: Date.UTC(2021, 7, 19, 11, 33, 35, 459), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 34, 15, 89), value: 43 },
        { time: Date.UTC(2021, 7, 19, 11, 35, 20, 345), value: 36 },
        { time: Date.UTC(2021, 7, 19, 11, 36, 6, 112), value: 33 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 30, 447), value: 34 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 32, 501), value: 33.5 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 0, 815), value: 32 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 3, 424), value: 31.5 },
        { time: Date.UTC(2021, 7, 19, 11, 40, 42, 803), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 1, 835), value: 37 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 32, 78), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 44, 447), value: 38.5 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 49, 421), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 49, 589), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 33, 664), value: 37 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 47, 674), value: 36.5 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 12, 81), value: 35 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 22, 184), value: 34.8 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 47, 921), value: 33 },
        { time: Date.UTC(2021, 7, 19, 11, 44, 45, 503), value: 34 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 6, 794), value: 33 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 9, 769), value: 32 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 14, 358), value: 32.5 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 27, 572), value: 31 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 40, 573), value: 31 },
        { time: Date.UTC(2021, 7, 19, 11, 46, 3, 266), value: 30.5 },
        { time: Date.UTC(2021, 7, 19, 11, 46, 6, 218), value: 30.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 12, 758), value: 29.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 14, 47), value: 29 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 19, 825), value: 32 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 31, 184), value: 31 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 56, 779), value: 32 },
        { time: Date.UTC(2021, 7, 19, 11, 49, 23, 739), value: 32.5 },
        { time: Date.UTC(2021, 7, 19, 11, 50, 6, 565), value: 31 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 16, 5), value: 37 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 8, 968), value: 38 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 47, 269), value: 37 },
      ],
    },
    packetLoss: {
      color: "#28c6d1",
      lineStyle: "dashed",
      fillAreaAlpha: 0.2,
      data: [
        { time: Date.UTC(2021, 7, 19, 11, 31, 15, 131), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 5, 809), value: 15 },
        { time: Date.UTC(2021, 7, 19, 11, 32, 39, 572), value: 17.5 },
        { time: Date.UTC(2021, 7, 19, 11, 33, 35, 459), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 34, 15, 89), value: 17 },
        { time: Date.UTC(2021, 7, 19, 11, 35, 20, 345), value: 16 },
        { time: Date.UTC(2021, 7, 19, 11, 36, 6, 112), value: 13 },
        { time: Date.UTC(2021, 7, 19, 11, 36, 6, 298), value: 12 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 30, 447), value: 14 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 32, 501), value: 13.5 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 42, 325), value: 13 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 54, 240), value: 13 },
        { time: Date.UTC(2021, 7, 19, 11, 38, 57, 553), value: 12 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 0, 815), value: 12 },
        { time: Date.UTC(2021, 7, 19, 11, 39, 3, 424), value: 11.5 },
        { time: Date.UTC(2021, 7, 19, 11, 40, 42, 803), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 1, 835), value: 17 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 32, 78), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 44, 447), value: 18.5 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 49, 421), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 41, 49, 589), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 33, 664), value: 17 },
        { time: Date.UTC(2021, 7, 19, 11, 42, 47, 674), value: 16.5 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 12, 81), value: 15 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 22, 184), value: 14.8 },
        { time: Date.UTC(2021, 7, 19, 11, 43, 47, 921), value: 13 },
        { time: Date.UTC(2021, 7, 19, 11, 44, 45, 503), value: 14 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 14, 358), value: 12.5 },
        { time: Date.UTC(2021, 7, 19, 11, 45, 27, 572), value: 11 },
        { time: Date.UTC(2021, 7, 19, 11, 46, 6, 218), value: 10.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 12, 758), value: 9.5 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 14, 47), value: 9 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 40, 451), value: 10 },
        { time: Date.UTC(2021, 7, 19, 11, 47, 51, 302), value: 11 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 9, 30), value: 10 },
        { time: Date.UTC(2021, 7, 19, 11, 48, 19, 825), value: 12 },
        { time: Date.UTC(2021, 7, 19, 11, 49, 23, 739), value: 12.5 },
        { time: Date.UTC(2021, 7, 19, 11, 50, 6, 565), value: 11 },
        { time: Date.UTC(2021, 7, 19, 11, 50, 14, 735), value: 13 },
        { time: Date.UTC(2021, 7, 19, 11, 51, 53, 182), value: 28 },
        { time: Date.UTC(2021, 7, 19, 11, 52, 50, 716), value: 29 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 16, 5), value: 17 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 17, 509), value: 13.5 },
        { time: Date.UTC(2021, 7, 19, 11, 53, 37, 194), value: 17.5 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 8, 968), value: 18 },
        { time: Date.UTC(2021, 7, 19, 11, 54, 47, 269), value: 17 },
      ],
    },
  },
  timeSeriesChartStacks: {
    networkPerformance: {
      chartIds: ["latency", "bandwidth", "packetLoss"],
      label: "Network Performance",
    },
  },
};
<!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.