Charts > Timeline ​

A timeline visually represents events or milestones chronologically over a specific period, providing a clear and linear overview of temporal relationships.

The Chart ​

Randomize dataUpload data

Download example CSV

Copy HTML

Playground ​

Style

Usage Example (with tooltip) ​

<template>
  <Timeline :data="data" @hover="setTooltip" />

  <OTTooltip :info="tooltip">
    <p class=" my-0">
      <span class="font-semibold"> Value:</span> {{ tooltip?.data?.value }}
    </p>
  </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

Component API ​

This chart is built using SVG and d3. It displays data elements on a timeline. The size of the circles is based on the values. The date property of the elements in the data array should be a Date object.

Data ​

[
  {
    name: "Data 1",
    date: new Date("2020-09-01"),
    value: 30,
  },
];

Props ​

Dependencies ​

• d3