# RFC-49 Chart components for UI Kit

**URL:** <https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552>\
**Category:** Request for Comments (RFC)\
**Tags:** forge-ui, forge, forge-ui-kit\
**Created:** [April 30, 2024, 6:23am UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552 "2024-04-30T06:23:23Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![JemmaSwaak](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/jemmaswaak/32/50378_2.png) [@JemmaSwaak](https://community.developer.atlassian.com/u/JemmaSwaak)\
**Post date:** [April 30, 2024, 6:23am UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/1 "2024-04-30T06:23:23Z")

</div>

### Summary of Project:

We are considering the addition of chart components to the Forge UI Kit. The types of chart visualisations under consideration include Area, Line, Bar, Pie, and Single value. We are seeking feedback from our partners to ensure we build the best possible solution.

- **Publish:** Apr 30, 2024
- **Discuss:** May 10, 2024
- **Resolve:** May 17, 2024

### Problem:

Currently, the Forge UI Kit does not have any chart components, which limits the ability of developers to present data in a visually appealing and interactive manner which is consistent to Atlassian Design System.

### Proposed Solution:

As mentioned in the Summary of Project, we propose to add a variety of chart components to the Forge UI Kit. Like all UI Kit components, these chart components will be consistent to Atlassian Design System. Some key aspects that we plan to include in these charts components:

- Baked in accessibility
- Interactive e.g. hover for value
- Design token supported
- Accepting relative sizing

### Asks:

We are seeking feedback from our partners on the following aspects:

- What type of charts would you like to be included?
- What kind of interaction would you expect?
- Would you be keen to join an Early Access Program (EAP)?
- Any other suggestions or concerns?

Please feel free to reply here or get in touch at [jswaak@atlassian.com](mailto:jswaak@atlassian.com). We appreciate your constructive comments and look forward to shaping this idea together.

Best,  
Jemma

---

<div class="post-metadata">

**Author:** ![AlejandroSurezTecnof](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/alejandrosureztecnof/32/48005_2.png) [@AlejandroSurezTecnof](https://community.developer.atlassian.com/u/AlejandroSurezTecnof)\
**Post date:** [April 30, 2024, 8:56am UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/2 "2024-04-30T08:56:28Z")

</div>

I would love that you also support these components to use them outside UI Kit as part of Atlaskit

---

<div class="post-metadata">

**Author:** ![ppasler](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/ppasler/32/49174_2.png) [@ppasler](https://community.developer.atlassian.com/u/ppasler)\
**Post date:** [April 30, 2024, 9:25am UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/3 "2024-04-30T09:25:33Z")

</div>

Hi there,

We will consider specific requirements in detail, but one aspect is crucial: **Custom Field support**.

This was limited in UI Kit 1:  
[https://developer.atlassian.com/platform/forge/ui-kit-components/uik1\_modules/#customfield](https://developer.atlassian.com/platform/forge/ui-kit-components/uik1_modules/#customfield)

Cheers,  
paul

---

<div class="post-metadata">

**Author:** ![Anthony](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/anthony/32/47079_2.png) [@Anthony](https://community.developer.atlassian.com/u/Anthony)\
**Post date:** [April 30, 2024, 12:23pm UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/4 "2024-04-30T12:23:18Z")

</div>

Unlisted on April 30, 2024, 12:23pm UTC



---

<div class="post-metadata">

**Author:** ![dmorrow](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/dmorrow/32/35895_2.png) [@dmorrow](https://community.developer.atlassian.com/u/dmorrow)\
**Post date:** [May 2, 2024, 1:45am UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/5 "2024-05-02T01:45:49Z")

</div>

Listed on May 2, 2024, 1:45am UTC



---

<div class="post-metadata">

**Author:** ![ProjectScienceLtd](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@ProjectScienceLtd](https://community.developer.atlassian.com/u/ProjectScienceLtd)\
**Post date:** [May 3, 2024, 8:30am UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/6 "2024-05-03T08:30:06Z")

</div>

Sounds great! We’re very interested in this and we have strong customer demand for UI Kit charts.

From chart.js (or equivalent) we’d love to see bar, line, doughnut, pie and scatter charts. We suggest that Atlassian deploys these simple high-value charts first, then incrementally grows the range of charts offered. In terms of interaction, basic hover / tooltip value interaction is fine. It doesn’t need to be sophisticated, as the intent is to augment the textual elements.

We’re also interested in the EAP too.

---

<div class="post-metadata">

**Author:** ![shushen](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/shushen/32/50167_2.png) [@shushen](https://community.developer.atlassian.com/u/shushen)\
**Post date:** [May 3, 2024, 8:21pm UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/7 "2024-05-03T20:21:18Z")

</div>

Would love to see pie chart support and happy to be part of EAP. Thanks!

---

<div class="post-metadata">

**Author:** ![rlander](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/rlander/32/39067_2.png) [@rlander](https://community.developer.atlassian.com/u/rlander)\
**Post date:** [May 4, 2024, 4:56pm UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/8 "2024-05-04T16:56:18Z")

</div>

The underlying components for this should be made available via ADS, UI Kit is a constraint that is unnecessary, although I have no issue with a UI Kit variant of said components.

What if I want some ADS compliant chart components to use in Data Center? Funnily enough I have been looking for some.

---

<div class="post-metadata">

**Author:** ![EricKruegerStrataCom](https://avatars.discourse-cdn.com/v4/letter/e/f14d63/32.png) [@EricKruegerStrataCom](https://community.developer.atlassian.com/u/EricKruegerStrataCom)\
**Post date:** [May 6, 2024, 2:37pm UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/9 "2024-05-06T14:37:39Z")

</div>

Take a look at chart.js to see what the bare minimum requirements for charting should be. Chart.js is an open source charting toolset that is widely used.  
Types of Charts to include:  
Area Chart  
Bar Chart  
Bubble Chart  
Doughnut/pie chart  
Line Chart  
Mixed Chart Types  
Polar Area  
Radar Chart  
Scatter chart

In the ITSM world. charts NEED to have the functionality so that users can drill down into them. So a ‘drill down’ (double-click or tap) needs to take the user to a list of records that are in that section of the chart. So in the forge world, this would mean that the chart must listen for front-end events like double-click or tap and redirect the user to a data selection.  
I’ve written a few forge Dashboard Gadgets for JSM Assets and charting capability is greatly needed for that functionality to be useful. I was going to try to integrate chart.js into my Dashboard Gadgets, but now I think I’ll just wait until this functionality comes out!  
Please include me in the EAP as I already have plenty of use-cases I can test with this functionality.

---

<div class="post-metadata">

**Author:** ![ryan](https://avatars.discourse-cdn.com/v4/letter/r/a8b319/32.png) [@ryan](https://community.developer.atlassian.com/u/ryan)\
**Post date:** [May 14, 2024, 8:58pm UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/10 "2024-05-14T20:58:42Z")

</div>

Start with the basics. Line, Area, Pie. Support onclick events for drilldown but even that isn’t necessary for a first version.

People have mentioned an atlaskit component. That seems totally unnecessary to me. There are dozens of existing free and open-source charting components. It’s not clear why these couldn’t be used with in an AtlasKit app. It should be trivial to incorporate design tokens and Atlassian typography with these existing components. I would rather you focus on UIKit.

---

<div class="post-metadata">

**Author:** ![RuslanKobieliev](https://avatars.discourse-cdn.com/v4/letter/r/a87d85/32.png) [@RuslanKobieliev](https://community.developer.atlassian.com/u/RuslanKobieliev)\
**Post date:** [May 16, 2024, 7:08am UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/11 "2024-05-16T07:08:39Z")

</div>

Hello there,

Please take a look on [**ECharts**](https://echarts.apache.org/en/index.html) which one we using currently.

Currently we are using three chart types:

- Line
- Area
- Bar

It would be nice to have the following features:

- Animated hovered states
- Data zoom with scroll wheel
- Chart loader (with the possibility to customize it)
- Vertical lines through y-axis (with the possibility to customize it)
- Controllable user locale
- Possibility to format and customize any labels (values, tooltips, marking)
- Possibility to customize the chart root HTML element (wrapper)
- Possibility to style value lines (color, width, opacity, etc.)
- Axis date intervals

Preferable data format for chart series: [[xAsix value, yAsix value], [xAsix value, yAsix value]].

Thanks!

---

<div class="post-metadata">

**Author:** ![ppasler](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/ppasler/32/49174_2.png) [@ppasler](https://community.developer.atlassian.com/u/ppasler)\
**Post date:** [May 31, 2024, 6:54am UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/12 "2024-05-31T06:54:49Z")

</div>

Hi @JemmaSwaak,  
any update or details on this? According to your roadmap, this should be resolved 1 week ago.  
Cheers,  
paul

---

<div class="post-metadata">

**Author:** ![JemmaSwaak](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/jemmaswaak/32/50378_2.png) [@JemmaSwaak](https://community.developer.atlassian.com/u/JemmaSwaak)\
**Post date:** [June 6, 2024, 11:51pm UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/13 "2024-06-06T23:51:18Z")

</div>

Hey everyone,

Thank you for all your comments. We will be keeping these suggestions in mind as we go forward with Charts for UI Kit. For more updates on Charts please keep an eye out on [the changelog](https://developer.atlassian.com/platform/forge/changelog/) and [our public roadmap](https://trello.com/c/og2n5dUL). For those who have said they would be interested in our EAP I’ll be reaching out to you shortly.

Many thanks,  
Jemma

---

<div class="post-metadata">

**Author:** ![ibuchanan](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/ibuchanan/32/35815_2.png) [@ibuchanan](https://community.developer.atlassian.com/u/ibuchanan)\
**Post date:** [June 6, 2024, 11:51pm UTC](https://community.developer.atlassian.com/t/rfc-49-chart-components-for-ui-kit/79552/14 "2024-06-06T23:51:46Z")

</div>

Closed on June 6, 2024, 11:51pm UTC


