How to create grouped and stacked bar chart
Application Type
Reactive

Hello,

I am struggling with creating a grouped and stacked bar chart as the image below in outsystems. 

I knew how to create a stacked bar chart but for a grouped and stacked bar chart I really did not know how to deal with these inputs:

 

Hope some one can help to create this type of chart using the data in the attached file. Thank you very much.

Best regards,

Phuoc Luc.

Product Chart.xlsx

Solution

Hello @Luc Nguyen 

Hope you're well! 

Attached you will find an OML containing the solution you're looking for. 

For your case, your Label will be the Department Area (ENG, EAC, ...), the value has to be the Product's value and the Data Series Name is the Product's Name (Product A, Product B). You have to then set the Stacking Type to Stacked.

To make the grouping, you need to set a relationship between the Data Series Name and a "stack", to to this you need to set on the DataSeriesFormat input something like this:


In your case DataSeriesName that correspond to Product A, Product B and Product C will belong to the stack "Present Core Product" (which will be added to the DataSeriesJSON like shown in the screenshot above); Product D, Product E and Product F will belong to stack "Future Core Product"

In the OML provided I hard coded those values but I'm sure you can do these attrbutions dynamically, just remember you need a DataSeriesFormat point for each Data Series Name.

If you need further help, do not hesitate to reply to this thread.


Regards,

Joana Borges

StackedGroupedChart.oml

Hello Joana,

Thank you very much. It worked for me.

One more thing that I still need in order to make the chart more perfect. Hope you can still help.

Do you know how to create the label for the "future core product" and "present core product" as below image or some kind of description that we can let the user know that product A,B,C are belong to present core product and similarly product D,E,F are belong to future core.

Thanks very much

Phuoc Luc

Glad I could be of help :)

Hm, I don't think you can achieve something like that out of the box with Charts. You have to do it yourself using components from OutSystems UI or customizing your own.

In this case, I used a Card Sectioned from OutSystems UI.

Yes Thank you very much for your reply Joana,

Regards,

Phuoc Luc

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.