UI Kit data visualizations EAP

Forge Forge UI Kit and Custom UI
22

Thanks so much for the feedback! We will look at implementing that for Preview.

23

@JemmaSwaak thanks for having these in EAP for us. Thoughts on additional color customizations? The color tokens are… well to be candid they are optimized for accessibility as a default, and they’re dense with high contrast against the background but can rather clash with each other and or be somewhat indistinct. Check out the “yellow” which is really more of a brown, for example. Yes, I’m aware of this https://atlassian.design/foundations/color-new/accents#best-practices but we are talking charts and more colors seem like they’ll end up necessary… -nick

24

Hi @NickWade,
Thank you so much for the feedback! We’ve passed this feedback to our design team.

1 Like
25

Feel free to pass this along with it if you like! Example of the best color combos we could come up with in our Content Retention Manager Marketplace apps:

Dashboard (by Classification details)
Dashboard (by Classification details)2940×1922 383 KB

2 Likes
26

Hi Jemma, may I know if this can be for Preview this week or next?

27

Hi @YY1!
Thanks for your interest! We’re currently working to bring this work into GA in the next few weeks! Keep an eye out on this public roadmap ticket or changelog to be updated when it is released.
Best,
Vicky

28

@JemmaSwaak could I please request an enhancement to BarChart which allows specifying a hardcoded “max value” of the chart? (currently the max value is always the greatest number)

The use case of this is where there are multiple bar charts on a single page with different values - supporting a consistent max value makes it easier for the user to visually compare between bar charts with different values.

This would ideally be implemented in a manner similar to Nivo:

maxValue defaulting to auto maxValue set to 1000
auto
auto3296×1926 519 KB
1000
10003296×1926 498 KB

Enjoying using the components so far!

29

@VickyHu

  1. The latest @forge/react@11.2.0 package released today (4/15) has misaligned y-axis labels with HorizontalStackBarChart in Confluence:

    Screenshot 2025-04-15 at 7.47.37 PM
    Screenshot 2025-04-15 at 7.47.37 PM1150×872 55 KB

    But it looks as expected in Jira:

    Screenshot 2025-04-15 at 7.55.42 PM
    Screenshot 2025-04-15 at 7.55.42 PM1138×818 32.4 KB

    I’ve seen this in the past couple of versions of the package but not earlier (sorry can’t verify from which version it started).

  2. The colors assigned to the color accessor groups are different between Jira and Confluence, and it appears to be changing over the versions.

    This makes it really hard to align it with the labels that could have semantic meanings in colors. For example, we tried to match a “Evergreen” label with a green color in Jira by ordering the data, but then Confluence assigns a different color as can be seen in the above screenshots.

    The removal of color prop was a set back to us, but the random and different behaviors between Confluence and Jira made it even harder to work around the change.

    Any chance this could be consistent between Jira and Confluence? Or maybe even bring back the colors prop?

2 Likes
30

Since Data Visualization became GA yesterday, I’ve reopened ECOHELP-62531 that reported this bug but was closed when the feature was in EAP.

31
32

Hello @shushen ,
I’m late to the party :partying_face:

If I understand your posts, there used to be a colors prop to manually assign color to chart data groups, and now the color is assigned automatically ?

@Atlassian, the pick of specific colors in a chart seems to be a must have.
Imagine a PASS/FAIL pie chart, and the PASS get assigned the red color and FAIL the green. It would be completely misleading.
And colors get to be picked differently between Jira and Confluence ? :confused:

I’m confused about this UI Kit data visualizations…

2 Likes
33

@FabienLydoire Yes, I can confirm. The colors prop was there in EAP. From what I’ve heard elsewhere, it might be considered for coming back. Thanks for chiming in, what a great example you’ve given!

3 Likes
34

Hello @JemmaSwaak

There is no @Atlassian so I refer to you. :slight_smile:
Please consider the Bug I filled in about settings colors in charts: FRGE-1778.

35

The y-axis label misalignment mentioned above. How was that not caught in testing? And how is it sitting like that in production for weeks?

One would hope there’s a basic internal release step where a human developer looks at all the components to see if they’re rendering correctly. Can only assume that step doesn’t exist.

Edit: y-axis problem still there across all charts in @forge/react@11.2.1

36

Hi partners,
I really value your feedback and wanted to help address some of the questions here!

  1. For the y-axis alignment bug, we have deployed a fix and that is rolling out to production right now, if you’re urgently needing this fixed, we can add your tenant ID directly if you could raise a support ticket here or let me know directly!
  2. I’ve prioritised color config for our team to work on, and will be picked up as soon as possible. I’ll update this thread when we are working on this.
    Regarding inconsistent product color allocations, I have raised this with the relevant teams internally to accelerate their design refresh, which is impacting this issue.

Let me know if there’s any other questions,
Vicky

3 Likes