@domoinc/gantt-chart

GanttChart

Basic Gantt Chart

Configuration Options

animationDuration

Type: number
Default: 600
Units: ms

undefined

axesLabelColor

Type: color
Default: "#8A8D8E"

Font color for the axes labels

axesLabelFontFamily

Type: string
Default: "Open Sans"

Font type for the axes labels

axesLabelSize

Type: number
Default: 11
Units: px

Font size for the axes labels

axesLineColor

Type: color
Default: "#E3E3E3"

Line color for the axes

chartLabelColor

Type: color
Default: "#888888"

Font color for the task labels

chartName

Type: string
Default: "GanttChart"

Name of chart for reporting

dateFormat

Type: String
Default: "YYYY-MM-DD"

Format that each date is expected to come in

gaugeFillPrimaryColor

Type: color
Default: "#73B0D7"

Color for the progress bar

gaugeStrokePrimaryColor

Type: color
Default: "#73B0D7"

Line color for the progress line indicator

generalBackgroundColor

Type: color
Default: "#FFFFFF"

Fill color that indicates something is empty

height

Type: number
Default: 400
Units: px

Height of the widget

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

labelTextSize

Type: number
Default: 12
Units: px

Font size for the labels

lineWidth

Type: number
Default: 2
Units: px

Width of the progress line, current day line, and hover line

progressBarHeight

Type: number
Default: 10

Height of each tasks progress bar

progressBarPaddingPercent

Type: number
Default: 10

Padding in between each progress bar

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textColor

Type: color
Default: "#888888"

Color for the current day line indicator

textFontFamily

Type: string
Default: "Open Sans"

Font type for the text

titleTextSize

Type: number
Default: 22

Font size for the title

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 400
Units: px

Width of the widget

xAxisLongDateFormat

Type: string
Default: "M/D/YYYY"

Format used when a year change is detected in the xAxis dates

xAxisShortDateFormat

Type: string
Default: "M/D"

Format used for date with the same year in the xAxis

Data Definition

endDate

Type: date

Default validate:

function (d) {
	          return this.accessor(d).isValid() &&
	            moment(_Chart.a('startDate')(d), _Chart.c('dateFormat')) < moment(_Chart.a('endDate')(d), _Chart.c('dateFormat'));
	        }

Default accessor:

function (line) { return moment(line[2], _Chart.c('dateFormat')); }

percentComplete

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0 && this.accessor(d) <= 100; }

Default accessor:

function (line) { return Number(line[3]); }

startDate

Type: date

Default validate:

function (d) { return this.accessor(d).isValid();}

Default accessor:

function (line) { return moment(line[1], _Chart.c('dateFormat')); }

task

Type: number

Default validate:

function (d) { return this.accessor(d) !== undefined && this.accessor(d) !== ''; }

Default accessor:

function (line) { return line[0] === undefined ? undefined : String(line[0]); }

Events

Dispatch Events

External Events

Example

//var currentDate = moment(new Date());
//var sampleData = [
//  //Task	StartDate	EndDate	PercentComplete
//  ["Widgets", currentDate.subtract(12, 'day').format('YYYY-MM-DD'), currentDate.add(15, 'day').format('YYYY-MM-DD'), 0.3],
//  ["Plugin Works", currentDate.add(2, 'day').format('YYYY-MM-DD'), currentDate.add(22, 'day').format('YYYY-MM-DD'), 0],
//  ["Able to Save", currentDate.add(8, 'day').format('YYYY-MM-DD'), currentDate.add(20, 'day').format('YYYY-MM-DD'), 0]
//];
var sampleData = [
  //Task	StartDate	EndDate	PercentComplete
  ["Widgets", '2020-01-13', '2020-01-16', 0.3],
  ["Plugin Works", '2020-01-03', '2020-01-23', 0],
  ["Able to Save", '2020-01-09', '2020-01-21', 0],
];

var aHeight = 400;
var aWidth = 400;

var tX = 80;
var tY = 50;

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr({height: '500px', width: '500px'})
  .append("g")
  .attr("transform", "translate(" + tX + "," + tY + ")")
  .chart("GanttChart")
  .c({
    width: aWidth,
    height: aHeight,
    labelTextSize: 10
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(sampleData);