How bar chart with parent and sub catagory

[baxing]

How bar chart with parent and sub catagory

[baxing]

OK,

I improved from your code by using Method : groupby and map to add values to createRange and createRangeGrid . Follow this example which I think should be as complete as I want

Thank you very much for your advice.

[baxing]

I've tried experimenting with Amcharts 4 again, as in this example link, but I'm still having trouble setting the color of the final text X-axis label. which refuses to change color according to the data(Here it is Q4/2023).

So I moved to try using Amcharts 5 instead, which got good results like this link example.

@martynasma Thank you for always giving me advice.

[martynasma]

So I moved to try using Amcharts 5 instead

Good choice. I'm happy 😉

[martynasma]

Yes, you can use axis ranges to group categories like that:
https://www.amcharts.com/docs/v4/tutorials/grouping-axis-labels-using-ranges/

Example in v5:
https://www.amcharts.com/demos/grouped-and-sorted-columns/

[baxing]

Hi martynasma

The example link you provided is not exactly what I want.
Let me show you this picture to make it clearer.

• In each major group, at least 2 results will be compared. (As shown in this picture is Revenue and Expense)
  But in this example, there is no graph showing the items together (in this case Revenue, Expense).
  Please advise me further on how to do this.

[martynasma]

I think the example is exactly what I have provided.

The idea is to have different category for each cluster, like: "2022-Q1", "2023-Q3", "2022-Q1", etc.

Then just "group" them using axis ranges.

Hope it makes sense.

[baxing]

Thanks for the additional advice. But I still can't figure out how to apply your suggestion to the sample image below.

Where its data looks like this

let data = [ { "quarterly": "Q1/2022", "quarter": "Q1", "year": "2022", "Revenue": 11.91166848, "NetIncome": 6.663209907, }, { "quarterly": "Q1/2023", "quarter": "Q1", "year": "2023", "Revenue": 12.08203299, "NetIncome": 6.181569343, }, { "quarterly": "Q2/2022", "quarter": "Q2", "year": "2022", "Revenue": 18.16145046, "NetIncome": 8.049555152, }, { "quarterly": "Q2/2023", "quarter": "Q2", "year": "2023", "Revenue": 22.27695636, "NetIncome": 8.698725621, }, { "quarterly": "Q3/2022", "quarter": "Q3", "year": "2022", "Revenue": 11.29143493, "NetIncome": 6.365859777, }, { "quarterly": "Q3/2023", "quarter": "Q3", "year": "2023", "Revenue": 11.46405229, "NetIncome": 6.355936042, }, { "quarterly": "Q4/2022", "quarter": "Q4", "year": "2022", "Revenue": 16.86187094, "NetIncome": 7.798630041, }, { "quarterly": "Q4/2023", "quarter": "Q4", "year": "2023", "Revenue": 21.92640815, "NetIncome": 9.365977512, } ];

Could you please give me some sample code so that the data I provide can be displayed the same way in Amachats3 using Amcharts4 or Amcharts5 instead?

Thank

[martynasma]

Data looks good.

Here's an example:
https://codepen.io/team/amcharts/pen/bGZZmaq?editors=0010

[baxing]

Thank you very much🤓, this is a great example for me. and I can continue to use it.

But I'm stuck with some problems. This is because the information within the Data variable may not always contain all 4 quarters (maybe there is only Q1 or there may be only Q1 and Q2). And the year is not fixed. Depends on available information For example, it might be 2023 and 2024, or it might be comparing 3 years, like 2022, 2023, and 2024.

Is it possible to createRange and createRangeGrid according to the information automatically.
From this example, as I understand it, they used the groupBy and map functions to help and then set values for guides within categoryAxis, which caused various labels to change accordingly. information automatically.
Can you please suggest more code for me to do it in this way again?

Thank you

[martynasma]

Yes. You can implement some code to follow your logic of adding axis ranges based on data.

I believe that the example provided is a good proof of concept. Your welcome to build on it as per your requirements 😉

[baxing]

I would like to ask more about changing the color of text in certain positions as shown in the picture.

1. If I want to change the color of only the text in the last item of each group to red.
2. If I want to change the color of the labels in every group to green?

[martynasma]

You can selectively color labels use an adapter:
https://www.amcharts.com/docs/v4/concepts/adapters/

[baxing]

I tried and couldn't read the chart.data value that is the "color" part.
Example I use the "color" part to set the color of the text in the Item along the x-axis.
chart.data = [ { "quarterly": "Q1/2022", "quarter": "Q1", "year": "2022", "Revenue": -11.91166848, "NetIncome": 6.663209907}, { "quarterly": "Q1/2023", "quarter": "Q1", "year": "2023", "Revenue": 12.08203299, "NetIncome": -6.181569343, "color": "#74AAE4" }, { "quarterly": "Q2/2022", "quarter": "Q2", "year": "2022", "Revenue": 18.16145046, "NetIncome": 8.049555152}, { "quarterly": "Q2/2023", "quarter": "Q2", "year": "2023", "Revenue": 22.27695636, "NetIncome": 8.698725621, "color": "#74AAE4" }, { "quarterly": "Q3/2022", "quarter": "Q3", "year": "2022", "Revenue": 11.29143493, "NetIncome": 6.365859777}, { "quarterly": "Q3/2023", "quarter": "Q3", "year": "2023", "Revenue": 11.46405229, "NetIncome": 6.355936042 , "color": "#74AAE4" }, { "quarterly": "Q4/2022", "quarter": "Q4", "year": "2022", "Revenue": 16.86187094, "NetIncome": 7.798630041}, { "quarterly": "Q4/2023", "quarter": "Q4", "year": "2023", "Revenue": 21.92640815, "NetIncome": 9.365977512, "color": "#A55" }

In Amcharts 3, there is a Property "labelColorField" that can directly set the Field name according to the Link Doc.

Can you give more advice on what to do for Amcharts 4?

Or if using "propertyFields" will it be possible to fill in the label section?

[martynasma]

Since amCharts 4 support has reached end-of-life Dec 31, 2023, I must draw a line here.

If you still have support subscription, try contacting amCharts support directly: [email protected]

Otherwise, you might try posting your questions on StackOverflow.

I hope that sounds reasonable.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.