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 in Vizlib Gantt | Dimensions.
TABLE OF CONTENTS
- 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
- Will show the Title, Subtitle, and Footnote on the extension. These properties can be controlled via static text or expressions.
- 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
- 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.
- 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
- 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.
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 at Vizlib Gantt | Dimensions.
Figure 4.2: Color by Expression
The options within the Color by = Expression section are:
- Group bars color
- Color (expression driven)
- #457B9d (Default)
- Color (expression driven)
- Font size
- Slider & Input field (Expression driven)
- 12px (Default)
- Slider & Input field (Expression driven)
- Group bars label color
- Color (expression driven)
- #fff (white) (Default)
- Color (expression driven)
- 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 at Vizlib Gantt | Dimensions.
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
- Checked/True (Figure 4.3.5) (default)
- Font size
- Slider & Input field (Expression driven)
- 12px (Default)
- Slider & Input field (Expression driven)
- Group bars label color
- Color (expression driven)
- #fff (white) (Default)
- Color (expression driven)
- 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 at Vizlib Gantt | Dimensions.
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 (Figire 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.
- No consistency between the colors and values within the Qlik App.
- Checked/True (Figire 4.3.5) (default)
- Font size
- Slider & Input field (Expression driven)
- 12px (Default)
- Slider & Input field (Expression driven)
- Group bars label color
- Color (expression driven)
- #fff (white) (Default)
- Color (expression driven)
- 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 checkbox
- Checked (Default)
- Automatic column width
- Unchecked
- Allows you to set the desired percentage width of the Dimension column.
- Checked (Default)
- Controlling the width of the Dimension panel with a slider or input field (Figure 5.2)
- Group colors
- Controlling the width of the Dimension panel with a slider or input field (Figure 5.2)
Figure 5.2: Dimension column width adjustment
- 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
- Text color
- You can edit the
- Controlling the width of the Dimension panel with a slider or input field (Figure 5.2)
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
NOTE: Follow this link to read more about Dependencies in the Vizlib Gantt: 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 section)
- When enabled, you have a dropdown 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)
- 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 exceedinly long.
Figure 7.3: Character limit mode
- Disabled
- Hides the labels on all events
- Enabled (Default)
- Bar height
- Auto
- height = 29px
- Custom
- Slider
- Min = 10px
- Max = 100px
- Expression input
- Expression driven
NOTE: Can exceed the limits set by the slider but at your own risk
- Expression driven
- Slider
- Auto
- Font size (Event name)
- Slider
- Min = 1px
- Max = 50px
- Expression input
- Expression driven
NOTE: You can exceed the slider's limits but at your own risk.
NOTE: 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).
- Expression driven
- Slider
- Event bar labels color
- Changes the color of both Event name and Progress value
- Color picker
- Character limit
- Slider
- Min = 0
- Max = 100
- Slider
- Show event tag on bar
- Checkbox
- Checked (default)
- Shows the value
- Unchecked
- Hides the value
- Checked (default)
- Checkbox
- Font size (Event tag)
- Slider
- Min = 1px
- Max = 50px
- Expression input
- (NOTE: the same potential issue mentioned above in Warning)
- Slider
- Event tag position
- Inside (default)
- Shown on bar
- Outside
- References Appendix 1
- Inside (default)
- Show Progress value in event
- Checkbox
- Checked (default)
- Shows the value
- Unchecked
- Hides the value
- Checked (default)
- Checkbox
- Progress value position
- Inside (default)
- Shown on bar
- Outside
- References Appendix 1
- Inside (default)
- Bar Labels
- Colors
- Color by
- As mentioned in the Group header styling (also explained below in Color by for Event groups)
- Color by
- 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
- 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
- Pin opacity
- Slider
- Pins
- 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.
- 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.
- Event bar radius
- Slider
- Min = 0px
- Max = 20px
- Slider
- Enable bar shadow
- Checked
- Displays a shadow behind the event bars
- Unchecked (default)
- Checked
- Show events side by side
Color by settings for Event groups
NOTE: If the Event color is defined within the Dimensions section, then coloring is not applied regardless of the selections made in the Color by options.
You can learn more here at Vizlib Gantt | Dimensions.
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.
- Checked/True (Figure 4.3.5) (default)
The options within the Color by = Expression section are:
- Group bars color
- Color (Figure 4.2) (expression driven)
- #A8DADC (Default)
- Color (Figure 4.2) (expression driven)
The options within the Color by = Event groups section are:
- Takes the color from
- Only takes the color if there is a Dimension group. I f not, Auto color is applied.
- Opacity
- Slider
Milestone styling
Styling the milestone is explained below in the 3 options presented in Figure 8.
Figure 8: Color by options for the Milestone
NOTE: If the Event color is defined within the Dimensions section, then coloring is not applied regardless of the selections made in the Color by options.
You can learn more here at Vizlib Gantt | Dimensions.
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.
- Checked/True (Figure 4.3.5) (default)
The options within the Color by = Expression section are:
- Group bars color
- Color (Figure 4.2) (expression driven)
- #A8DADC (Default)
- Color (Figure 4.2) (expression driven)
The options within the Color by = Milestone parent section are:
- Takes the color from
- Only takes the color if there is a Dimension group. I f 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
NOTE: You cannot change the formatting of the dates or the position of the Quarter label. This is predefined.
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