Comments (15)
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.
from amcharts4.
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.
from amcharts4.
So I moved to try using Amcharts 5 instead
Good choice. I'm happy π
from amcharts4.
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/
from amcharts4.
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.
from amcharts4.
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.
from amcharts4.
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
from amcharts4.
Data looks good.
Here's an example:
https://codepen.io/team/amcharts/pen/bGZZmaq?editors=0010
from amcharts4.
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
from amcharts4.
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 π
from amcharts4.
I would like to ask more about changing the color of text in certain positions as shown in the picture.
- If I want to change the color of only the text in the last item of each group to red.
- If I want to change the color of the labels in every group to green?
from amcharts4.
You can selectively color labels use an adapter:
https://www.amcharts.com/docs/v4/concepts/adapters/
from amcharts4.
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?
from amcharts4.
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.
from amcharts4.
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.
from amcharts4.
Related Issues (20)
- Remove Fill color from Pictorial Stacked Chart HOT 4
- In a FunnelSeries chart, how can I show labels in the sliceLinks? HOT 2
- How to hide the tooltip shown for xAxis title HOT 2
- How to hide the bullets when zoom in or zoomout event called HOT 2
- Amchart 4 Legend In Arabic are not Showing Properly HOT 2
- Unable set label for radar chart as per my requirements HOT 2
- How to ensure consistent PNG export appearance regardless of browser zoom? HOT 5
- Amchart4 is ignoring null-category in data HOT 3
- minZoomCount for categoryAxis on yAxis HOT 2
- Pie of a Pie (problems with the lines) HOT 2
- How to show text in chart area without overlapping with the bars ? HOT 2
- Local formatter for ValueAxis HOT 2
- [Question] Multiple CandlestickSeries is shifted relative to each other HOT 2
- Wrong cursor position when viewbox and real width/height not matching HOT 3
- Map with clustered points and lines HOT 2
- Center wrapped legend items HOT 2
- How to access legend from another Element HOT 2
- force directed graph : label on edge and graph going out of bounds HOT 3
- Need to add custom percentages in Tooltip instead of default CalculatePercentage in amcharts 4 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amcharts4.