Gantt Charts

A bar chart that visualizes a project schedule.

Gantt Example

A Gantt chart is a type of bar chart that visualizes a project schedule. It displays the start and finish dates of the various elements of a project and helps in visualizing the project timeline, task dependencies, and progress.

The Gantt chart requires GanttSeriesItem instances to represent tasks. Each GanttSeriesItem can optionally have a completed status to indicate the progress of the task (property completed) and dependencies on other items (property dependency).

A ready Gantt chart is shown in Gantt Chart Example.

Gantt Chart Example

A Gantt chart is enabled with ChartType.GANTT. You can make type-specific settings in the PlotOptionsGantt object. For more detailed information about the Gantt chart configuration see Gantt Chart.

Source code

Java  // Create a Gantt chart
Chart chart = new Chart(ChartType.GANTT);

// Modify the default configuration
final Configuration configuration = chart.getConfiguration();
configuration.setTitle("Gantt Chart with Progress Indicators");

// Configure the axes - set timeline boundaries
XAxis xAxis = configuration.getxAxis();
xAxis.setMin(Instant.parse("2014-10-17T00:00:00Z"));
xAxis.setMax(Instant.parse("2014-10-30T00:00:00Z"));
PlotOptionsGantt plotOptionsGantt = new PlotOptionsGantt();
configuration.setPlotOptions(plotOptionsGantt);

// Add data
GanttSeries series = new GanttSeries();
series.setName("Project 1");
final GanttSeriesItem startPrototype = new GanttSeriesItem(
        "Start prototype",
        Instant.parse("2014-10-18T00:00:00Z"),
        Instant.parse("2014-10-25T00:00:00Z"));
startPrototype.setCompleted(0.25);
series.add(startPrototype);

series.add(new GanttSeriesItem(
        "Test prototype",
        Instant.parse("2014-10-27T00:00:00Z"),
        Instant.parse("2014-10-29T00:00:00Z")));

final GanttSeriesItem develop = new GanttSeriesItem(
        "Develop",
        Instant.parse("2014-10-20T00:00:00Z"),
        Instant.parse("2014-10-25T00:00:00Z"));
develop.setCompleted(new Completed(0.12, SolidColor.ORANGE));
series.add(develop);

series.add(new GanttSeriesItem(
        "Run acceptance tests",
        Instant.parse("2014-10-23T00:00:00Z"),
        Instant.parse("2014-10-26T00:00:00Z")));
configuration.addSeries(series);

Gantt Example

Open in a
new tab

Source code

ChartTypeGantt.javapackage com.vaadin.demo.component.charts.charttypes;

import com.vaadin.flow.component.charts.Chart;
import com.vaadin.flow.component.charts.model.*;
import com.vaadin.flow.component.charts.model.style.SolidColor;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

import java.time.Instant;

@Route("chart-type-gantt")
public class ChartTypeGantt extends Div {
    public ChartTypeGantt() {
        // tag::snippet[]

        // Create a Gantt chart
        Chart chart = new Chart(ChartType.GANTT);

        // Modify the default configuration
        final Configuration configuration = chart.getConfiguration();
        configuration.setTitle("Gantt Chart with Progress Indicators");

        // Configure the axes - set timeline boundaries
        XAxis xAxis = configuration.getxAxis();
        xAxis.setMin(Instant.parse("2014-10-17T00:00:00Z"));
        xAxis.setMax(Instant.parse("2014-10-30T00:00:00Z"));
        PlotOptionsGantt plotOptionsGantt = new PlotOptionsGantt();
        configuration.setPlotOptions(plotOptionsGantt);

        // Add data
        GanttSeries series = new GanttSeries();
        series.setName("Project 1");
        final GanttSeriesItem startPrototype = new GanttSeriesItem(
                "Start prototype", Instant.parse("2014-10-18T00:00:00Z"),
                Instant.parse("2014-10-25T00:00:00Z"));
        startPrototype.setCompleted(0.25);
        series.add(startPrototype);

        series.add(new GanttSeriesItem("Test prototype",
                Instant.parse("2014-10-27T00:00:00Z"),
                Instant.parse("2014-10-29T00:00:00Z")));

        final GanttSeriesItem develop = new GanttSeriesItem("Develop",
                Instant.parse("2014-10-20T00:00:00Z"),
                Instant.parse("2014-10-25T00:00:00Z"));
        develop.setCompleted(new Completed(0.12, SolidColor.ORANGE));
        series.add(develop);

        series.add(new GanttSeriesItem("Run acceptance tests",
                Instant.parse("2014-10-23T00:00:00Z"),
                Instant.parse("2014-10-26T00:00:00Z")));
        configuration.addSeries(series);
        // end::snippet[]

        add(new VerticalLayout(chart));
    }

}

Docs

Docs

Gantt Charts

Gantt Example