Usage

Display time line in chart.

Import

main.ts

import { createApp } from 'vue';
import App from './App.vue';
import VueGantt3 from 'vue-gantt-3';
import 'vue-gantt-3/es/vue-gantt-3.css';

const app = createApp(App);
app.use(VueGantt3);
app.mount('#app');

Basic

Basic usage.

Change gantt row height

If you need change gantt row's height, set attribute rowHeight in the gantt.

Gantt style

You can set attribute styleOption to define some styles in the gantt. Most styles can be modified in css.

Empty row

Rows will not fill the whole area if the number of rows is small. Set attribute getEmptyRows to provide rows for gantt.

Row Selection

Row selection is configured with the rowSelection gantt property.

Add or remove row

Add or remove the row data inside the gantt by updating the rows gantt property.

Update row

You can update the row data directly, then call freshRowNodes method to refresh the view.

Time scale

You can use shift + mouse wheel to scale the time.

Stretch and move time line

Move the timeline to where you want it.

TIP

Gantt will combine time lines auto if two time lines' date overlap.

Time points

Gantt support show time points on time line.

Tree data

Gantt support display tree structure data.

INFO

If a row has children, its display date will depend on its children.

Custom time line

Using a component to cover time line's default behavior.