Hello everyone,
Following our RFC-49, I’m excited to announce that UI Kit data visualizations components are in Early Access Program (EAP). To start using this EAP, sign up using the Forge EAP form.
UI Kit data visualizations allow you to use chart components to organise and present data visually. For more detailed information about how to use the components, see here.
Best regards,
Jemma Swaak
Hi Jemma,
looking forward to use those 
Cheers,
paul
Hello,
I have been working with these today in a jira issue panel module and they feel and work great. Perfectly as expected. Slight question/feedback, I had was the decision behind a standalone component vs a property.
For example:
Why isn’t there a boolean property to convert the BarChart to isHorizontal? Or asking it another way why is there no DonutChart component?
Consistency over the API would make this much easier to use and train others to use if possible. Either way is fine whichever is better for you, but I would just like to suggest some clean consistent format be chosen.
Thank you again, very happy with this! Very useful!
Hi @JemmaSwaak
Thanks for this update. It’s what I’m expecting.
About Single value, I’m confused with the data prop:
An array of numbers: The first number in the array is used as the display value, the second number in the array is used to calculate the increase/decrease percentage relative to the first number.
More intuitively, the first number is the previous value (e.g. 2500, like last month if we compared monthly) and the second number is the current value shown in the frontend (e.g. 5000). The increase/decrease percentage should be (5000 - 2500)/2500 = 100%.
Please take a look at this point and let me know if any questions.
Thanks,
YY1
Hi @Zishan
Thank you for your feedback, this is really valuable!
The reason why we initially decided to have multiple bar chart type is because horizontal charts have their axis flipped from a vertical chart, having different bar chart component gives us flexibility to add / modify functionality that only affects one direction.
Whereas all the props for a Donut and a Pie chart should behave the same no matter the visual state of the chart.
None of this is set in stone, which is why it is great to hear feedback during an EAP. We will take your feedback into consideration when working on the next stages of the visualisation components!
Hi @YY1
Given the following code snippets:
This generates a single value chart with an increase indicator.
<SingleValueChart
// 2500 - value shown in the frontend
// 5000 - value used to calculate the increase percentage
data={[2500, 5000]}
/>
(Math.abs(5000 - 2500) / 5000) = 50%
This generates a single value chart with a decrease indicator
<SingleValueChart
// 5000 - value shown in the frontend
// 2500 - value used to calculate the decrease percentage
data={[5000, 2500]}
/>
(Math.abs(2500 - 5000) / 2500) = 100%
Please let us know if this clears up the data prop of the single value chart, let us know how we could have worded it better / made it clearer.
Thank you for your feedback and for using the new visualisation components!
Thanks for the detailed explaination of the component.
Please also consider my above suggestion.
Hi @YY1
Thank you for your suggestion!
I have raised this with the team that have created the visualisation components and they are taking this feedback onboard and will be revisiting the indicator functionality / calculation.
Cheers!
Hi @JemmaSwaak
Could you please take a look at why this component is not available now? It’s offline.
Thanks，
YY1
Hi @YY1,
Could you please give us more details about the issue that you are facing? Is it a specific component? And what extension point are you using?
Thanks
Hi @AlvaroBezerra
I’m using the chart https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/ and haven’t tried others. I can see the chart before and can’t see it recently. What other information do you need? Please tell me.
Thanks,
YY1
Any idea when these components will be GA?
Hi @EricKruegerStrataCom, The components will be in Preview early next year. you can track the progress of UI Kit data visualizations in our Public Roadmap here.
Thanks, We have to wait for another quarter.
I get how the Single Value Chart component works but how would you use it if, say you have this months data and last months. So in March you sold 50 units and now in April you sold 75. How can i convert these number (or any other) so that the increase / decrease is correct (up 25% in this case)? The first number in the array is 75, but what would be the algorithm to convert the 50, if i just use [75, 50] I’ll get -50%?
Hello @StuartBargon, thank you for your question. To add onto @CameliaGao’s answer, I believe the algorithm to convert the two numbers into a percentage change is already in place for Single Value chart. If you place the data as [50,75] instead of [75,50] , it should give you the percentage increase that you’re after? The percentage increase from 50 to 75 will be +50% though, not +25% . It is calculated by (75-50)/50.
Thanks for your question @StuartBargon. It appears that at this point in time, Visualizations EAP does not support negative values. I have raised this with the team that have created the visualisation components and this is something we will take into consideration for Preview / GA. Thanks again for raising it!
OK that’s not what I mean, I guess my feedback is that the Single Value Chart component needs some rethinking as its currently not intuitive, if it is released beyond the EAP. Thanks for you help
