Appearance

The appearance of the Vizlib Gantt is determined within the Appearance section of its property panel. The options within this section define the event and group colors, dependency styling and milestone presentation. Group layout and styling can also be determined.

Note: Appearance determines the product's look and feel globally. This means when you change the color of, i.e. Events, then this is applied globally.

If you want to apply non-global settings, follow the instructions here.

This topic contains the following sections:

• General

• Alternate States

• Group Layout

• Group Header Styling

• Dimension Column Styling

• Dependency Styling

• Event Bar Styling

• Milestone Styling

• Appendix

General

General settings (Figure 1.1) consist of the same options within Qlik objects and are similar across all Vizlib extensions.

Figure 1.1: General settings

The settings are:

• Show titles

  • Off (default)

  • On

    • Will show the Title, Subtitle, and Footnote on the extension. These properties can be controlled via static text or expressions.

      

      Figure 1.2: Titles and text

• Toggle off hover menu

  • Unchecked/Off (default)

  • Checked/On

    • When Checked/On, the hover menu is NOT displayed, meaning you cannot expand the object but can still interact with the Vizlib Gantt's context menu.

• Show details

  • Hide (default)

  • Show

    • To learn about this feature, go to: Qlik's community forums.

Alternate States

Qlik Alternate states (Figure 2) provide a way to create separate selections within a Qlik Sense visualization. This allows you to compare different data sets without affecting the global selections across the entire application. Each alternate state acts as a separate "virtual" selection state, enabling more controlled and customized data exploration and analysis.

Learn more about Alternate states from Qlik's documentation: Using alternate states for comparative analysis.

Figure 2: Alternate states

Group Layout

Group layouts (Figure 3.1) determine the grouping dimensions on a functional basis.

Figure 3.1: Group layouts

The settings within this section control:

• Headers in parent groups

  • Show (default) (Figure 3.2)

  • Hide

  • When hidden, the Gantt chart hides all parent group bars. This is seen in the comparison between Figure 3.2 and Figure 3.3.

    

    Figure 3.2: Show dimension groups

    

    Figure 3.3: Hide dimension groups

• Show order number

  • Off (default) (Figure 3.4)

  • On

  • When on the result is seen in Figure 3.5. The order of numbers is presented as 1, 1.1, 1.1.1, 1.1.1.1, etc. The highest level parent group determines the primary order number, followed by the descending group level until you reach the event rows, as seen in Figure 3.5.

    The layout of the order number is <OrderNumber> <DimensionValue>.

    

    Figure 3.4: Order numbers off

    

    Figure 3.5: Order numbers on

• Expand all

  • Enabled (default) (Figure 3.2)

  • Disabled

    • When disabled, this results in all groups collapsing. The result is that the user must click to expand the dimensions to view what is within them.

      Figure 3.6 shows all groups collapsed beneath the highest level grouping dimension.

      Figure 3.7 shows what groups look like when expanding the highest-level grouping dimension.

      

      Figure 3.6

      

      Figure 3.7

Group Header Styling

Group header styling has three (3) options (Figure 4.1) which can be used to style the group dimensions. They are covered within this section and are:

• Expression

• Group

• Group hierarchy

Figure 4.1: Different styling options for group header bars

Expression

Expression (Figure 4.2), as the name suggests, is expression-driven. So, you can colour the header groups with an if() statement or another kind of expression. Within this option are options to change the text presentation.

Note: If you have selected the option to Custom in the Group header color within the dimension, then this group will not be updated regardless of the options you have configured. You can learn more here.

Figure 4.2: Color by Expression

The options within the Color by = Expression section are:

• Group bars color

  • Color (expression driven)

  • #457B9d (Default)

• Font size

  • Slider & Input field (Expression driven)

  • 12px (Default)

• Group bars label color

  • Color (expression driven)

  • #fff (white) (Default)

• Character limit

  • No limit (Default)

  • Max 100 characters

Group

Color by Group (Figure 4.3) relates to the predefined color palettes of Vizlib Gantt. There are nine (9) color palettes to choose from, options to control the color presentation and font options.

Note: If you have selected the option to Custom in the Group header color within the dimension, then this group will not be updated regardless of the options you have configured. You can learn more here.

Figure 4.3: Color by Group

The options within the Color by = Group section are:

• Color palette

  • Nine (9) unique color palettes to choose from

  • Vizlib (Default)

  • Figures 4.3.1 & 4.3.2 shows how the Vizlib Gantt reacts to different color palettes.

    

    Figure 4.3.1: Color palette = Vizlib

    

    Figure 4.3.2: Color palette = QlikSense 100

• Reverse colors

  • Reverses the colors (as seen in Figures 4.3.3 & 4.2.4).

    

    Figure 4.3.3: Reversed = False

    

    Figure 4.3.4: Reversed = True

• Persistent colors

  • Checked/True (Figure 4.3.5) (default)

    • Defines the value as a specific color.

    • For example, 'Value 1' is always #ff0000, 'Value 2' is always #0000ff, etc.

      Note: This may result in the colors not appearing in the same order specified in the color palette.

  • Unchecked/False (Figure 4.3.6)

    • No consistency between the colors and values within the Qlik App.

    

    Figure 4.3.5: Persistent colors = True

    

    Figure 4.3.6: Persistent colors = False

• Font size

  • Slider & Input field (Expression driven)

  • 12px (Default)

• Group bars label color

  • Color (expression driven)

    • #fff (white) (Default)

• Character limit

  • No limit (Default)

  • Max 100 characters

Group Hierarchy

Note: If you have selected the option to Custom in the Group header color within the dimension, then this group will not be updated regardless of the expression you have used. You can learn more here.

Figure 4.4: Color by Group Hierarchy

The options within the Color by = Hierarchy section are:

• Color palette

  • Nine (9) unique color palettes to choose from Vizlib (Default)

  • Figures 4.3.1 & 4.3.2 shows how the Vizlib Gantt reacts to different color palettes.

• Reverse colors

  • Reverses the colors (as seen in Figures 4.3.3 & 4.2.4).

• Persistent colors

  • Checked/True (Figure 4.3.5) (default)

    • Defines the value as a specific color.

    • For example, 'Value 1' is always #ff0000, 'Value 2' is always #0000ff, etc.

      Note: This may result in the colors not appearing in the same order specified in the color palette.

  • Unchecked/False (Figure 4.3.6)

  • No consistency between the colors and values within the Qlik App.

    • View Figures 4.3.5 & 4.3.6 for examples.

• Font size

  • Slider & Input field (Expression driven)

    • 12px (Default)

• Group bars label color

  • Color (expression driven)

    • #fff (white) (Default)

• Character limit

  • No limit (Default)

  • Max 100 characters

Dimension Column Styling

To style the Dimension column (A.K.A Group column/panel) and to change its width, this is achieved in the Appearance > Dimension Column Styling section.

Figure 5.1: Appearance | Dimension column styling

The options are:

• Dimension panel width

  • Controlling the width of the Dimension panel with a slider or input field (Figure 5.2)

    

    Figure 5.2: Dimension column width adjustment

  • The property is controlled via a check box

    • Checked (Default)

      • Automatic column width

    • Unchecked

      • Allows you to set the desired percentage width of the Dimension column.

• Group colors

  • Controlling the width of the Dimension panel with a slider or input field (Figure 5.3)

    

    Figure 5.3: Dimension column width

  • This section is dynamic, so depending on the number of dimensions in your Cizlib Gantt chart results in that number of Group colors options.

    • You can edit the

      • Text color

        • Color picker

      • Background color

        • Color picker

      • Background opacity

        • Slider

Watch the video below from the Vizlib April 2022 Monthly Roundup Highlights. It helps to explain the Dimension column styling options.

Video 1: Vizlib Gantt's Dimension column styling

Dependency Styling

To change the Link weight (thickness), Color, and Highlighted color of the Vizlib Gantt, this is done via the Dependency Styling section (Figure 6.1).

Figure 6.1: Dependency styling for the Vizlib Gantt

The options to style the Dependency links are:

• Link weight

  • The thickness of the dependency link.

  • Default 2px

    • Min 1px

    • Max 5px

• Link color

  • This is the color of the dependency link Color picker.

• Highlighted on hover

  • This is the color of the dependency link when you hover over an event that has a link connecting to it or leading from it.

  • Color picker

Follow this link to read more about Dependencies in Vizlib Gantt - Dependencies/Critical Flow.

Event Bar Styling

Event bar styling contains many options to color the events globally within the Vizlib Gantt. Figure 7.1 displays all options. This also affects the styling of Custom events.

Figure 7.1: Event bar styling

The options within this section are:

• Labels

  • Bar Labels

    • Enabled (Default)

      • Shows the events label (the event name defined in the Dimensions event section)

      • When enabled, you have a drop-down box (Figure 7.2) which changes whether the label is inside or outside the event bar.

        

        Figure 7.2: Label position options for events Inside (default)

      • Inside (default)

      • Outside

        Note: See Appendix 1, which shows the rules regarding position of the Label, Event tag, and Progress depending on different position placements (inside/outside).

        Note: When set to Outside the option Character limit mode appears (Figure 7.3) which when set to Character limit only, forces the outside text to respect the character limit - there are examples when Event names and Event tags conflict if there string values are exceedingly long.

        

        Figure 7.3: Character limit mode

    • Disabled

      • Hides the labels on all events.

  • Bar height

    • Auto

      • Height = 29px

    • Custom

      • Slider

        • Min = 10px

        • Max = 100px

      • Expression input

        • Expression driven

          Important: Can exceed the limits set by the slider, but at your own risk.

  • Font size (Event name)

    • Slider

      • Min = 1px

      • Max = 50px

    • Expression input

      • Expression driven

        Important:

        You can exceed the slider's limits but at your own risk.

        If Bar height is not set to auto and your Font size exceeds the internal height, you will see the result in Figures 7.4 and 7.5.

        Figure 7.4: Conflicting text size (inside)	Figure 7.5: Conflicting text size (outside)

  • Event bar labels color

    • Changes the color of both Event name and Progress value.

    • Color picker

  • Character limit

    • Slider

      • Min = 0

      • Max = 100

  • Show event tag on bar

    • Checkbox

      • Checked (default)

        • Shows the value

      • Unchecked

        • Hides the value

  • Font size (Event tag)

    • Slider

      • Min = 1px

      • Max = 50px

    • Expression input

      Important: The same potential issue mentioned above in Warning).

  • Event tag position

    • Inside (default)

      • Shown on bar

    • Outside

      • References Appendix 1.

  • Show Progress value in event

    • Checkbox

      • Checked (default)

        • Shows the value

      • Unchecked

        • Hides the value

  • Progress value position

    • Inside (default)

      • Shown on bar

    • Outside

      • References Appendix 1.

• Colors

  • Color by

    • As mentioned in the Group Header Styling section (also explained below in Color by Settings for Event Groups).

• Event pins

  • Pins

    • When an event doesn't have an end date in the data model, it is represented as a pin (Figure 7.6). the pin is located in the center of the event. The width can vary depending on the length of the string within the Event name

      

      Figure 7.6: Event represented as a pin

  • Pin opacity

    • Slider

• Bars

  • Show events side by side

    • Showing the bars side by side saves space when the Vizlib Gantt is not configured in Cascading mode. The Vizlib Gantt will do its best to calculate the width of all events and place them in the best position to reduce the vertical space.

      Note: This can result in events jumping position as you pan or expand the view of your Vizlib Gantt. This is because more events are being calculated, and therefore the Vizlib Gantt presents them in a view which reduces the vertical space taken. This can result in a non-logical ordering of events.

  • Event bar radius

    • Slider

      • Min = 0px

      • Max = 20px

  • Enable bar shadow

    • Checked

      • Displays a shadow behind the event bars

    • Unchecked (default)

Color by Settings for Event Groups

The options within the Color by = Individual Event section are:

• Color palette

  • Nine (9) unique color palettes to choose from

  • Vizlib (Default)

  • Figures 4.3.1 & 4.3.2 shows how the Vizlib Gantt reacts to different color palettes.

• Reverse colors

  • Reverses the colors (as seen in Figures 4.3.3 & 4.2.4).

• Persistent colors

  • Checked/True (Figure 4.3.5) (default)

    • Defines the value as a specific color.

    • For example, 'Value 1' is always #ff0000, 'Value 2' is always #0000ff, etc.     

      Note: This may result in the colors not appearing in the same order specified in the color palette.

  • Unchecked/False (Figure 4.3.6)

    • No consistency between the colors and values within the Qlik App.

The options within the Color by = Expression section are:

• Group bars color

  • Color (Figure 4.2) (expression driven)

    • #A8DADC (Default)

The options within the Color by = Event groups section are:

• Takes the color from

  • Only takes the color if there is a Dimension group.  If not, Auto color is applied.

• Opacity

  • Slider

Milestone Styling

Styling the milestone is explained below in the three options presented in Figure 8.

Figure 8: Color by options for the Milestone

The options within the Color by = Individual Milestone section are:

• Color palette

  • Nine (9) unique color palettes to choose from

  • Vizlib (Default)

  • Figures 4.3.1 & 4.3.2 shows how the Vizlib Gantt reacts to different color palettes.

• Reverse colors

  • Reverses the colors (as seen in Figures 4.3.3 & 4.2.4).

• Persistent colors

  • Checked/True (Figure 4.3.5) (default)

    • Defines the value as a specific color.

    • For example, 'Value 1' is always #ff0000, 'Value 2' is always #0000ff, etc.     

      Note: This may result in the colors not appearing in the same order specified in the color palette.

  • Unchecked/False (Figure 4.3.6)

    • No consistency between the colors and values within the Qlik App.

The options within the Color by = Expression section are:

• Group bars color

  • Color (Figure 4.2) (expression driven)

    • #A8DADC (Default)

The options within the Color by = Milestone parent section are:

• Takes the color from

  • Only takes the color if there is a Dimension group.  If not, Auto color is applied.

• Opacity

  • Slider

Date Styling

Styling the Date on the Vizlib Gantt timeline is explained below and presented in Figure 9.1 to 9.3.

Figure 9.1: Date styling option in Property Panel

The option is:

• Show quarter labels

  Figure 9.2: Option off	Figure 9.3: Option on

Appendix

Appendix 1

In an event bar, it is possible to independently display or hide any of the texts that appear on it (Label, Event tag, and Progress). The below images show example states that can occur:

All hidden:

All displayed - inside:

All displayed - outside

Though you can control whether to show/hide the label and change the position to inside/outside, some hard rules apply to event text regardless of whether the position is inside or outside.

• Event name - Always displayed on the left.

• Event tag - Always displayed in the middle.

• Event progress - Always displayed on the right.