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
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:
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