PJs Grouped + Stacked column chart

Overview

Problem

As discussed in gitlab-org/gitlab#217332 (comment 363509064), we can either use the grouped variant of charts or the stacked variant of charts. Some use cases (such as compared MR incoming/outgoing) requires a combination of the two.

Solution

See Figma file →

Create a Grouped + Stacked column chart variant & documentation and figure out how the following would work.

Things that need updating to make this happen...

• Documentation
• Chart
  • Nested X-axis layout & rotation
  • Symmetric variant
  • Asymmetric variant
• Popover
  • Reverse value order: gitlab-org/gitlab-ui#854 (closed)
  • Change colour chips to match the appearance of columns: #617 (closed)
• Legend
  • update colour chips hover state: gitlab-org/gitlab-ui#855 (closed)
  • update colour chip groupings - columns:

Symmetric with different colors	Asymmetric with graded transparency

Guidance

Usage

Grouped + stacked charts typically represent two categories (one nested within another) moving across a time series:

• Groups: The first category is represented by a group of columns.
• Stacks: The second nested category is represented as a stacked column.
• Series: The time series is represented across the X-axis.

There are two initial types of grouped + stacked charts:

Symmetric	Asymmetric

For both symmetric and asymmetric variants, try to avoid using more than 5 values in each category.

Color

Transparency vs solid color discussion

• Solid or transparent?
• Our current transparent colour approach isn't scalable because it prevents us from using colours in sequence or next to each other (because 500 vs 950 look very similar when transparency is applied)
• We could use this opportunity to move from transparent charts to solid colour charts?

Symmetric solid	Symmetric transparent	Asymmetric solid	Asymmetric transparent

Symmetric solid	Symmetric transparent	Asymmetric solid	Asymmetric transparent

Grouped + stacked column charts colors patterns can apply to both symmetric and asymmetric chart variants:

Cross-column colors	Graded transparency	Specific colors
Use to highlight the relationship of the same stack category across different columns	Use to highlight the relationship between the category in the same stacked column and differentiate with other stacked columns	Use (sparingly) when the values in the chart have specific colors associated with them (for example, MR state or Vulnerability status)

See data visualization colors for more details.

Lines

• Min. width between groups for these charts is 32px to help differentiate

X-Axis Labels

• X-axis labels should be kept short, but can be rotated if necessary...

Short	Rotated

Legend

• I think columns is the nicest legend solution, although it takes up the most space
• This solution provides signifier for legend clickability.
• See prototype

Freeform	Rows	Columns

Popover

• Reverse current order of values in popover to align with how they are displayed in chart
• Change colour chips to match appearance of columns

Additional reading

• https://www.smashingmagazine.com/2017/03/understanding-stacked-bar-charts/