RFC-49 Chart components for UI Kit

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. We appreciate your constructive comments and look forward to shaping this idea together.

Best,
Jemma

8 Likes

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

3 Likes

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

Cheers,
paul

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.

2 Likes

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

1 Like

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.

2 Likes

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.

2 Likes

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.

Hello there,

Please take a look on ECharts 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!

1 Like