Appearance
Charts > Gantt Chart
A Gantt chart is a visual representation of project tasks displayed along a timeline, where each task is represented by a horizontal bar that reflects its start and end dates.
The Chart
Start date: NaN/NaN/NaN
End date: NaN/NaN/NaN
Download example CSV
Copy HTML
Playground
Animation
Duration of animation in ms
Style
Color for bars
Height of each bar
Show axis ticks on top
Component API
The gantt chart shows activities on a time line. It is built with SVG and d3. The position of the bars and x axis animate when the data changes, using d3 transitions
Usage Example (with tooltip)
vue
<template>
<GanttChart :data="data" :color="color" @hover="setTooltip" />
<OTTooltip :info="tooltip">
<div class="">
<p class="border-gray-400 border-b my-0">
<span class="font-semibold">Start date: </span
>{{ formatDate(tooltip.data.start) }}
</p>
<p class="my-0">
<span class="font-semibold">End date: </span
>{{ formatDate(tooltip.data.end) }}
</p>
</div>
</OTTooltip>
</template>
<script setup>
import useTooltip from "@/functions/useTooltip.js";
const [tooltip, setTooltip] = useTooltip();
</script>Data
js
[
{
id: "val1",
name: "Val 1",
start: "2021-02-12",
end: "2021-03-12",
color: "#D1D5DB",
},
...
]Props
| Name | Default | Type | Description |
|---|---|---|---|
data | [] | Array | The dataset |
duration | 300 | Number | The total time of the animation in ms |
ease | easeCubic | String | The easing function for animation |
barHeight | 30 | Number | The approximate height of each bar |
margin | { top: 12, right: 0, bottom: 12, left: 100 } | Object | The margins on each side of the chart in px |
dateDomain | null | Array | The min and max value for x axis |
showTopAxis | false | Boolean | Whether or not to show x axis above the chart |
Events
| Name | Argument | Description |
|---|---|---|
@select | { target, data } | Emitted when bar is clicked |
@hover | { target, data } | null | Emitted when bar is hovered |
Dependencies
- d3