How to Color Qlik Gantt Chart Powered by AnyGantt Extension for Qlik Sense

Image for post
Image for post

ithin the framework of our series of tutorials, explaining in detail different aspects of building a Gantt chart in Qlik Sense using the AnyGantt extension for Qlik Gantt charts, we are glad to share a new quick visual manual. This one describes how to color a Project Gantt chart.

Join us as in this tutorial we are going to make it completely clear how to color all main parts of Project Gantt charts: elements, chart area, table cells, table header, and timeline levels. In addition, you can see tutorials about labels, tooltips, and reference lines and ranges — they can also be colored. (Those about tooltips and reference lines and ranges are coming soon. Meanwhile, check out the AnyGantt extension’s documentation or ask our support engineers for assistance.)

For your convenience, this tutorial is available in two versions. Check it out as a video with a voice over (embedded right below). Or keep reading the alternative, text+pictures version.

Default Look

Here is how the Qlik Gantt chart powered by our AnyGantt extension for Qlik Sense looks like by default:

Image for post
Image for post

Coloring Elements

You can set the default fill and stroke colors of an element of a Project Gantt chart in just a couple of clicks.

In the properties panel, go to “ Appearance” and choose “ Defaults “. Click an element to open its settings.

For example, you can configure actual bars:

Image for post
Image for post

Use the “ Fill” option to set the fill color, “ Stroke” to set the stroke color, and “ Thickness “ to set the thickness of the stroke.

Image for post
Image for post

You can also set colors of milestones and dimension bars, in the same way.

To set the stroke color and the thickness of connectors, in the properties panel go to “ Add-ons”, then “ Connectors”. After that, use the “ Color” and “ Stroke thickness “ options.

Image for post
Image for post

In case you are interested in more advanced options of coloring Qlik Gantt chart elements, we will also share the “ Colors of Elements” tutorial soon. It will explain, among other things, how to color elements by expression; in the meantime, to learn about that, we invite you to the Color by Expression section of the AnyGantt extension’s documentation.

Coloring Table Cells and Chart Area

The table on the left of the Gantt chart displays text information.

Image for post
Image for post

You can color its cells, and the same colors will be automatically applied to the chart area — the area where elements are displayed.

Image for post
Image for post

In the properties panel, go to “ Appearance”, then “ Table”, then “ Cells “.

Image for post
Image for post

Select the fill type from the “ Fill type” drop-down menu. The available options include: “ Solid”, “ Hierarchy”, and “ Odd/even “.

Solid fill is applied to all rows. Go to “ Background” and use the “ Fill” and “ Opacity “ options to set their fill color and opacity. Note that the color you set affects not only the table, but also the chart area.

Image for post
Image for post

Hierarchy fill is applied only to rows displaying hierarchical dimensions. As you can see, the color you choose in the “ Background “ section automatically adjusts to mark different levels of the hierarchy.

Image for post
Image for post

If you choose the odd/even fill type, in the “ Background “ section you can set two different colors: one for odd rows and another for even rows.

Image for post
Image for post

To color the font, go to “ Font” and use the “ Color “ option.

Image for post
Image for post

Coloring Table Header

The header on the top of the table displays titles of its columns.

Image for post
Image for post

You can color its background and font.

To open the settings of the header, in the properties panel go to “ Appearance” -> “ Table” -> “ Header “.

Image for post
Image for post

To color the background, go to “ Background” and use the “ Fill” and “ Opacity “ options.

Image for post
Image for post

To color the font, go to “ Font” and use the “ Color “ option.

Image for post
Image for post

Coloring Timeline Levels

A timeline is a set of rows, or levels, above the chart area, where dates are displayed.

Image for post
Image for post

Timeline levels are configured individually. For each of them, you can set the background and font colors.

To open the settings of a level, go to “ Appearance” -> “ Timeline “ in the properties panel.

Image for post
Image for post

Then select one of the levels: “ Top level”, “ Middle level”, or “ Bottom level “.

Let’s select the top level first. To set the fill color of a level, use the “ Fill” option. To color the font, go to “ Font” and use the “ Color “ option.

Image for post
Image for post

Now, let’s color the middle and bottom levels:

Image for post
Image for post

Colored Qlik Gantt Chart

Now all main parts of the Project Gantt chart are colored! Take a look:

Image for post
Image for post

Questions?

Still have questions about how to customize Gantt charts in Qlik Sense in terms of color when you are using the AnyGantt extension for data visualization and analytics in project management? Do not hesitate to ask in the comments below or get in touch with our Support Team directly at support@anychart.com.

Looking for more charts for Qlik Sense? In total, we have 39 chart types available for you in the three intuitive Qlik Sense extensions launched within the framework of our partnership with Qlik. Even more charts and features are coming soon.

Originally published at https://qlik.anychart.com on April 15, 2020.

Written by

Cross-platform JavaScript/HTML5 data visualization solutions, flexible JS charts libraries & Qlik Sense extensions for all your dataviz needs: www.anychart.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store