Demos
Chart(Vue)
Special Charts
Gantt

Gantt (Vue)

Gantt charts illustrate project schedules. They show the start and finish dates of each task and typically add information such as the completion state of each task and dependencies between tasks. In this sample, we assign the gantItemFormatter() method to the itemFormatter property and the ganttChartRendered() method to the rendered event to create a Gantt chart using FlexChart.

Learn about FlexChart | FlexChart API Reference

This example uses Vue.

JavaScript
Angular
Vue
React
The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.vue
index.html
data.js
Copy to CodeMine
loading...
<template>
    <div class="container-fluid">
        <wj-flex-chart :itemsSource="data" chartType="Bar" bindingX="name" :tooltipContent="getTooltipContent"
            :itemFormatter="ganttItemFormatter" :rendered="ganttChartRendered" :palette="palette">
            <wj-flex-chart-series binding="start,end"></wj-flex-chart-series>
            <wj-flex-chart-axis wjProperty="axisY" :majorGrid=false :minorGrid=true :reversed=true>
            </wj-flex-chart-axis>
        </wj-flex-chart>
    </div>
</template>

<script setup>
import { clamp, format, isArray, isNumber, Rect } from "@mescius/wijmo";
import { FlexChart, FlexChartCore, IRenderEngine, HitTestInfo, Palettes, RenderEventArgs } from "@mescius/wijmo.chart";
import { getData } from "./data";
import { ref } from "vue";

const data = ref(getData());
const palette = ref(
    (() => {
        // Get random palette
        let palettes = Object.keys(Palettes).filter((prop) => isArray(Palettes[prop]));
        let rand = Math.floor(Math.random() * palettes.length);
        //
        return Palettes[palettes[rand]];
    })(),
);

function getTooltipContent(ht) {
    let str = format("<b>{name}</b>:<br/>{start:d} - {end:d}", {
        name: ht.x,
        start: ht.item.start,
        end: ht.item.end,
    });
    //
    if (ht.item && ht.item.percent != null) {
        str += format("<br/><i>percent complete: {percent}%</i>", ht.item);
    }
    //
    return str;
}

// show the percentage complete for each task
function ganttItemFormatter(engine, ht, defaultFormatter) {
    // draw the item as usual
    defaultFormatter();
    //
    // show percentage done
    let task = ht.item;
    //
    if (wijmo.isNumber(task.percent) && task.percent > 0) {
        let pct = wijmo.clamp(task.percent, 0, 100) / 100,
            rc = $_getTaskRect(ht.series.chart, task).inflate(-8, -8);
        //
        engine.fill = pct == 1 ? "green" : "gold"; //engine.stroke;
        engine.drawRect(rc.left, rc.top, rc.width * pct, rc.height);
    }
}

// show the task dependencies
function ganttChartRendered(chart, e) {
    let tasks = chart.collectionView.items;
    //
    tasks.forEach((task) => {
        // for each task
        let parents = $_getTaskParents(task, tasks); // get the parent tasks
        //
        parents.forEach((parent) => {
            // for each parent
            $_drawConnectingLine(e.engine, chart, task, parent); // draw connector
        });
    });
}

function $_drawConnectingLine(engine, chart, task, parent) {
    let rc1 = $_getTaskRect(chart, parent), // parent rect
        rc2 = $_getTaskRect(chart, task), // task rect
        x1 = rc1.left + rc1.width / 2, // parent x center
        x2 = rc2.left, // task left
        y1 = rc1.bottom, // parent bottom
        y2 = rc2.top + rc2.height / 2; // task y center
    //
    // draw connecting line
    let xs = [x1, x1, x2],
        ys = [y1, y2, y2];
    //
    engine.drawLines(xs, ys, "connector", {
        stroke: "black",
    });
    //
    // draw arrow at the end
    let sz = 5;
    //
    xs = [x2 - 2 * sz, x2, x2 - 2 * sz];
    ys = [y2 - sz, y2, y2 + sz];
    //
    engine.drawPolygon(xs, ys, "arrow", {
        fill: "black",
    });
}

function $_getTaskRect(chart, task) {
    let x1 = chart.axisX.convert(task.start.valueOf()),
        x2 = chart.axisX.convert(task.end.valueOf()),
        index = chart.collectionView.items.indexOf(task),
        y1 = chart.axisY.convert(index - 0.35),
        y2 = chart.axisY.convert(index + 0.35);
    //
    return new Rect(x1, y1, x2 - x1 + 1, y2 - y1 + 1);
}

function $_getTaskParents(task, tasks) {
    let parents = [];
    //
    if (task.parent) {
        task.parent.split(",").forEach((name) => {
            for (let i = 0; i < tasks.length; i++) {
                if (tasks[i].name === name) {
                    parents.push(tasks[i]);
                    break;
                }
            }
        });
    }
    //
    return parents;
}
</script>

<style>
body {
    margin-bottom: 24pt;
}
</style>
<template> <div class="container-fluid"> <wj-flex-chart :itemsSource="data" chartType="Bar" bindingX="name" :tooltipContent="getTooltipContent" :itemFormatter="ganttItemFormatter" :rendered="ganttChartRendered" :palette="palette"> <wj-flex-chart-series binding="start,end"></wj-flex-chart-series> <wj-flex-chart-axis wjProperty="axisY" :majorGrid=false :minorGrid=true :reversed=true> </wj-flex-chart-axis> </wj-flex-chart> </div> </template> <script setup> import { clamp, format, isArray, isNumber, Rect } from "@mescius/wijmo"; import { FlexChart, FlexChartCore, IRenderEngine, HitTestInfo, Palettes, RenderEventArgs } from "@mescius/wijmo.chart"; import { getData } from "./data"; import { ref } from "vue"; const data = ref(getData()); const palette = ref( (() => { // Get random palette let palettes = Object.keys(Palettes).filter((prop) => isArray(Palettes[prop])); let rand = Math.floor(Math.random() * palettes.length); // return Palettes[palettes[rand]]; })(), ); function getTooltipContent(ht) { let str = format("<b>{name}</b>:<br/>{start:d} - {end:d}", { name: ht.x, start: ht.item.start, end: ht.item.end, }); // if (ht.item && ht.item.percent != null) { str += format("<br/><i>percent complete: {percent}%</i>", ht.item); } // return str; } // show the percentage complete for each task function ganttItemFormatter(engine, ht, defaultFormatter) { // draw the item as usual defaultFormatter(); // // show percentage done let task = ht.item; // if (wijmo.isNumber(task.percent) && task.percent > 0) { let pct = wijmo.clamp(task.percent, 0, 100) / 100, rc = $_getTaskRect(ht.series.chart, task).inflate(-8, -8); // engine.fill = pct == 1 ? "green" : "gold"; //engine.stroke; engine.drawRect(rc.left, rc.top, rc.width * pct, rc.height); } } // show the task dependencies function ganttChartRendered(chart, e) { let tasks = chart.collectionView.items; // tasks.forEach((task) => { // for each task let parents = $_getTaskParents(task, tasks); // get the parent tasks // parents.forEach((parent) => { // for each parent $_drawConnectingLine(e.engine, chart, task, parent); // draw connector }); }); } function $_drawConnectingLine(engine, chart, task, parent) { let rc1 = $_getTaskRect(chart, parent), // parent rect rc2 = $_getTaskRect(chart, task), // task rect x1 = rc1.left + rc1.width / 2, // parent x center x2 = rc2.left, // task left y1 = rc1.bottom, // parent bottom y2 = rc2.top + rc2.height / 2; // task y center // // draw connecting line let xs = [x1, x1, x2], ys = [y1, y2, y2]; // engine.drawLines(xs, ys, "connector", { stroke: "black", }); // // draw arrow at the end let sz = 5; // xs = [x2 - 2 * sz, x2, x2 - 2 * sz]; ys = [y2 - sz, y2, y2 + sz]; // engine.drawPolygon(xs, ys, "arrow", { fill: "black", }); } function $_getTaskRect(chart, task) { let x1 = chart.axisX.convert(task.start.valueOf()), x2 = chart.axisX.convert(task.end.valueOf()), index = chart.collectionView.items.indexOf(task), y1 = chart.axisY.convert(index - 0.35), y2 = chart.axisY.convert(index + 0.35); // return new Rect(x1, y1, x2 - x1 + 1, y2 - y1 + 1); } function $_getTaskParents(task, tasks) { let parents = []; // if (task.parent) { task.parent.split(",").forEach((name) => { for (let i = 0; i < tasks.length; i++) { if (tasks[i].name === name) { parents.push(tasks[i]); break; } } }); } // return parents; } </script> <style> body { margin-bottom: 24pt; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexChart Gantt</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="compiler.js" type="module"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.js'); </script> </head> <body> <div id="app"></div> </body> </html>
export function getData() { let year = new Date().getFullYear(); // return [ { name: 'Task1', start: new Date(year, 0, 1), end: new Date(year, 2, 31), parent: null, percent: 100 }, { name: 'Task2', start: new Date(year, 3, 1), end: new Date(year, 3, 30), parent: 'Task1', percent: 100 }, { name: 'Task3', start: new Date(year, 4, 1), end: new Date(year, 6, 31), parent: 'Task2', percent: 75 }, { name: 'Task4', start: new Date(year, 3, 1), end: new Date(year, 6, 31), parent: 'Task1', percent: 33 }, { name: 'Task5', start: new Date(year, 7, 1), end: new Date(year, 8, 30), parent: 'Task3,Task4', percent: 0 }, { name: 'Task6', start: new Date(year, 9, 1), end: new Date(year, 11, 31), parent: 'Task1,Task5', percent: 0 }, { name: 'Task7', start: new Date(year, 0, 1), end: new Date(year, 11, 31), parent: null, percent: 50 } ]; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: '../plugin-vue/index.js' } //'*.vue': { loader: 'systemjs-plugin-vue' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.vue2.chart.analytics": "npm:@mescius/wijmo.vue2.chart.analytics/index.js", "@mescius/wijmo.vue2.chart.animation": "npm:@mescius/wijmo.vue2.chart.animation/index.js", "@mescius/wijmo.vue2.chart.annotation": "npm:@mescius/wijmo.vue2.chart.annotation/index.js", "@mescius/wijmo.vue2.chart.finance.analytics": "npm:@mescius/wijmo.vue2.chart.finance.analytics/index.js", "@mescius/wijmo.vue2.chart.finance": "npm:@mescius/wijmo.vue2.chart.finance/index.js", "@mescius/wijmo.vue2.chart.hierarchical": "npm:@mescius/wijmo.vue2.chart.hierarchical/index.js", "@mescius/wijmo.vue2.chart.interaction": "npm:@mescius/wijmo.vue2.chart.interaction/index.js", "@mescius/wijmo.vue2.chart.radar": "npm:@mescius/wijmo.vue2.chart.radar/index.js", '@mescius/wijmo.vue2.chart.map': 'npm:@mescius/wijmo.vue2.chart.map/index.js', "@mescius/wijmo.vue2.chart": "npm:@mescius/wijmo.vue2.chart/index.js", "@mescius/wijmo.vue2.core": "npm:@mescius/wijmo.vue2.core/index.js", "@mescius/wijmo.vue2.gauge": "npm:@mescius/wijmo.vue2.gauge/index.js", "@mescius/wijmo.vue2.grid.detail": "npm:@mescius/wijmo.vue2.grid.detail/index.js", "@mescius/wijmo.vue2.grid.filter": "npm:@mescius/wijmo.vue2.grid.filter/index.js", "@mescius/wijmo.vue2.grid.grouppanel": "npm:@mescius/wijmo.vue2.grid.grouppanel/index.js", '@mescius/wijmo.vue2.grid.search': 'npm:@mescius/wijmo.vue2.grid.search/index.js', "@mescius/wijmo.vue2.grid.multirow": "npm:@mescius/wijmo.vue2.grid.multirow/index.js", "@mescius/wijmo.vue2.grid.sheet": "npm:@mescius/wijmo.vue2.grid.sheet/index.js", '@mescius/wijmo.vue2.grid.transposed': 'npm:@mescius/wijmo.vue2.grid.transposed/index.js', '@mescius/wijmo.vue2.grid.transposedmultirow': 'npm:@mescius/wijmo.vue2.grid.transposedmultirow/index.js', "@mescius/wijmo.vue2.grid": "npm:@mescius/wijmo.vue2.grid/index.js", "@mescius/wijmo.vue2.input": "npm:@mescius/wijmo.vue2.input/index.js", "@mescius/wijmo.vue2.olap": "npm:@mescius/wijmo.vue2.olap/index.js", "@mescius/wijmo.vue2.viewer": "npm:@mescius/wijmo.vue2.viewer/index.js", "@mescius/wijmo.vue2.nav": "npm:@mescius/wijmo.vue2.nav/index.js", "@mescius/wijmo.vue2.base": "npm:@mescius/wijmo.vue2.base/index.js", '@mescius/wijmo.vue2.barcode.common': 'npm:@mescius/wijmo.vue2.barcode.common/index.js', '@mescius/wijmo.vue2.barcode.composite': 'npm:@mescius/wijmo.vue2.barcode.composite/index.js', '@mescius/wijmo.vue2.barcode.specialized': 'npm:@mescius/wijmo.vue2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', //'systemjs-plugin-vue': 'npm:systemjs-plugin-vue/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);