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. We appreciate your constructive comments and look forward to shaping this idea together.
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.
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.
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.
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.
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 and our public roadmap. For those who have said they would be interested in our EAP I’ll be reaching out to you shortly.