Schedule (Gantt)

The Schedule (Gantt) component is a data visualization component used to display data as a calendar and help teams plan work around deadlines and properly allocate resources.

Schedule (Gantt) Properties

The Schedule (Gantt) component properties consist of LAYOUT & POSITIONING, GENERAL, STYLING, CATEGORY AXIS, DATE TIME AXIS, and DYNAMIC VISIBILITY drawers.

This guide will describe all sections besides the Layout & Positioning and Dynamic Visiblity sections, as these are generic to each component. A separate guide and tutorial for each can be found by clicking the links above.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set Property Values article for more information on using the different methods.


GENERAL

All these properties pertain to the General data display and background styling of the component.

DATA

  • Data source - an input that must be bound to a range in the spreadsheet. In the property panel, a sample data structure can be downloaded to display how the spreadsheet should look when bound to the component.

Sample Data Structure, downloadable in the properties panel

CHART BACKGROUND

  • Background Color - a property to change the color of the component background

    • Colour can be set in 3 ways

      • Clicking the colored rectangle and using the color picker

      • Typing in a color value (as HEX code)

      • Binding to a color value in a spreadsheet cell (formats included below)

        • A color name - e.g. red, green, blue-violet, steel blue

        • a HEX code - e.g. #ff2233

        • an RGB specifier - e.g. rgb(255,40,75)

        • A HSL specifier - e.g. hsl(120, 100%, 50%)

    • Opacity can be set in 3 different ways:

      • Using the spinner buttons

      • Typing in a value

      • Binding to value in a spreadsheet cell

  • Border - a property to change the color of the component border. This is checked by default. Uncheck to disable the border.

    • Opacity - a property to change the opacity of the component border. This is checked by default. Uncheck to disable the border.

  • Padding – This property defines the space between the component and the component border. This can be applied to the Left, Right, Top, and Bottom edges.


STYLING

These properties apply to the styling of the component

BLOCK STYLE

  • Color Options

    • Use defaults - this applies the default colors to the component

    • Get from data - this populates an input that can be bound to a series of colors in the spreadsheet. See this article for ways that colors can be formatted in the spreadsheet.

  • Apply Colors to - select the series to apply the Schedule (Gantt) colors. This can be set to either the data Items or Categories. With either selected, the below list will populate with the respective list names.

  • Color

    • Color can be set in 3 ways

      • Clicking the colored rectangle and using the color picker

        • Typing in a color value (as HEX code)

        • Binding to a color value in a spreadsheet cell (formats included below)

          • A color name - e.g. red, green, blue-violet, steel blue

          • a HEX code - e.g. #ff2233

          • an RGB specifier - e.g. rgb(255,40,75)

          • A HSL specifier - e.g. hsl(120, 100%, 50%)

    • Opacity can be set in 3 different ways:

      • Using the spinner buttons

        • Typing in a value

        • Binding to value in a spreadsheet cell


DATA LABELS

  • Display

    • Item - A check option to display the item description on the period blocks. This is checked by default

    • Period - A check option to display the time on the period blocks. This is checked by default.

  • Font – Choose a font style from the dropdown list

  • Size – Change the font size of the data labels in 3 ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to a value in a spreadsheet cell

  • B I U – Apply Bold, Italic, and Underline text styling to the data labels. When any of these is toggled on, the button is blue:

Bold Italics Underline selection panel
  • Text Color – The text will be shown in the color that matches the value entered in the property field. This can be set in 3 ways:

    • Clicking the colored rectangle and using the color picker

    • Typing in a color value

    • Binding to a color value in a spreadsheet cell

  • Opacity – This determines the transparency of the text. This property can be set in 3 different ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to value in a spreadsheet cell

  • Capitalization – Change the letter case of the label text content to either the uppercase first letter, all uppercase letters, or all lowercase. Select the first 'As Typed' button to remove all Capitalization rules.

Capitalization selection panel


DATA TOOLTIPS

  • Display

    • Item - A check option to display the item description on the period blocks. This is checked by default

    • Period - A check option to display the time on the period blocks. This is checked by default.

  • Font – Choose a font style from the dropdown list

  • Size – Change the font size of the Text Label in 3 ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to a value in a spreadsheet cell

  • B I U – Use these toggle buttons (bold, italic, underline) to change the format of the Text Label. When toggled on, the button is blue:

Bold Italics Underline selection panel
  • Text Color – The text will be shown in the color that matches the value entered in the property field. This can be set in 3 ways:

    • Clicking the colored rectangle and using the color picker

    • Typing in a color value

    • Binding to a color value in a spreadsheet cell

  • Opacity – This determines the transparency of the text. This property can be set in 3 different ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to value in a spreadsheet cell

  • Text alignment – Choose to align the text to the left, right, or center. The blue button indicates the current selection:

Text Alignment selection panel
  • Capitalization – Change the letter case of the label text content to either the uppercase first letter, all uppercase letters, or all lowercase. Select the first 'As Typed' button to remove all Capitalization rules.

Capitalization selection panel
  • Padding – This property defines the space between the Text Label border and the Text Label content. It can be set in 3 ways:

    • The blue button indicates the current selection.

    • Typing in a value.

    • Binding to value in a spreadsheet cell.


CATEGORY AXIS

These properties pertain to the category axis on the Schedule component.

LABELS

  • Font – Choose a font style from the dropdown list

  • Size – Change the font size of the Text Label in 3 ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to a value in a spreadsheet cell

  • B I U – Use these toggle buttons (bold, italic, underline) to change the format of the Text Label. When toggled on, the button is blue:

Bold Italics Underline selection panel
  • Text Color – The text will be shown in the color that matches the value entered in the property field. This can be set in 3 ways:

    • Clicking the colored rectangle and using the color picker

    • Typing in a color value

    • Binding to a color value in a spreadsheet cell

  • Opacity – This determines the transparency of the text. This property can be set in 3 different ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to value in a spreadsheet cell

  • Capitalization – Change the letter case of the label text content to either the uppercase first letter, all uppercase letters, or all lowercase. Select the first 'As Typed' button to remove all Capitalization rules.

Capitalization selection panel

TITLE

  • Category Axis Title - the entered text will be displayed as the title for the Category axis.

  • Font – Choose a font style from the dropdown list

  • Size – Change the font size of the Text Label in 3 ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to a value in a spreadsheet cell

  • B I U – Use these toggle buttons (bold, italic, underline) to change the format of the Text Label. When toggled on, the button is blue:

Bold Italics Underline selection panel
  • Text Color – The text will be shown in the color that matches the value entered in the property field. This can be set in 3 ways:

    • Clicking the colored rectangle and using the color picker

    • Typing in a color value

    • Binding to a color value in a spreadsheet cell

  • Opacity – This determines the transparency of the text. This property can be set in 3 different ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to value in a spreadsheet cell

  • Capitalization – Change the letter case of the label text content to either the uppercase first letter, all uppercase letters, or all lowercase. Select the first 'As Typed' button to remove all Capitalization rules.

Capitalization selection panel

DATE TIME AXIS

These properties pertain to the DateTime axis on the Schedule component.

LABELS

  • Font – Choose a font style from the dropdown list

  • Size – Change the font size of the Text Label in 3 ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to a value in a spreadsheet cell

  • B I U – Use these toggle buttons (bold, italic, underline) to change the format of the Text Label. When toggled on, the button is blue:

Bold Italics Underline selection panel
  • Text Color – The text will be shown in the color that matches the value entered in the property field. This can be set in 3 ways:

    • Clicking the colored rectangle and using the color picker

    • Typing in a color value

    • Binding to a color value in a spreadsheet cell

  • Opacity – This determines the transparency of the text. This property can be set in 3 different ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to value in a spreadsheet cell


TITLE

  • Date Axis Title - the entered text will be displayed as the title for the Date Time axis.

  • Font – Choose a font style from the dropdown list

  • Size – Change the font size of the Text Label in 3 ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to a value in a spreadsheet cell

  • B I U – Use these toggle buttons (bold, italic, underline) to change the format of the Text Label. When toggled on, the button is blue:

Bold Italics Underline selection panel
  • Text Color – The text will be shown in the color that matches the value entered in the property field. This can be set in 3 ways:

    • Clicking the colored rectangle and using the color picker

    • Typing in a color value

    • Binding to a color value in a spreadsheet cell

  • Opacity – This determines the transparency of the text. This property can be set in 3 different ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to value in a spreadsheet cell

  • Capitalization – Change the letter case of the label text content to either the uppercase first letter, all uppercase letters, or all lowercase. Select the first 'As Typed' button to remove all Capitalization rules.

Capitalizaiton selection panel

Last updated

Was this helpful?