Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change column alignment #1774

Open
Zahar661 opened this issue Oct 25, 2024 · 7 comments
Open

Change column alignment #1774

Zahar661 opened this issue Oct 25, 2024 · 7 comments
Labels

Comments

@Zahar661
Copy link

Zahar661 commented Oct 25, 2024

Hello everyone I can't find a solution anywhere((
It is possible somehow in a graph with column clustering disabled, provided that there are only 6 columns, 3 need to be positioned to the left and 3 to the right. I can't use categories (It seems to me it should be like that, but it doesn't work.

column1.columns.template.setAll({
            width: am5.percent(48),
            fillOpacity: 0.4,
            strokeOpacity: 0,
            align: "left"
        });
column2.columns.template.setAll({
            width: am5.percent(35),
            fillOpacity: 0.7,
            strokeOpacity: 0,
            align: "left"
        });
column3.columns.template.setAll({
            width: am5.percent(15),
            fillOpacity: 1,
            strokeOpacity: 0,
            align: "left"
        });
column4.columns.template.setAll({
            width: am5.percent(48),
            fillOpacity: 0.4,
            strokeOpacity: 0,
            align: "right"
        });
column5.columns.template.setAll({
            width: am5.percent(35),
            fillOpacity: 0.7,
            strokeOpacity: 0,
            align: "right"
        });
column6.columns.template.setAll({
            width: am5.percent(15),
            fillOpacity: 1,
            strokeOpacity: 0,
            align: "right"
        });

align, centerX, pading not work((

@martynasma
Copy link
Collaborator

If you need to have two separate stacks, you can set stacked: false on the series that you want to start a new stack on.

Here's a demo: https://www.amcharts.com/demos/stacked-clustered-column-chart/

@Zahar661
Copy link
Author

@martynasma Thanks, but it doesn't work. It looks as it should, but it sums up the values of the columns
image

As in this example, only 2 columns are needed.
https://www.amcharts.com/demos/layered-column-chart/

@martynasma
Copy link
Collaborator

I'm not sure what you're asking. If you need columns overlapping, you set clustered: false, if you need them stacked, you use stacked: true.

@Zahar661
Copy link
Author

I want there to be 2 columns without clustering. next to each other. I think you need to use categories, but how to do it with DateAxis. Here is an example, if I set DateAxis, then there are no categories, if I set CategoryAxis, then the graph is not formed.

https://codepen.io/Zahar661/pen/PoMOggX

@martynasma
Copy link
Collaborator

If you don't want clustering, you need to set clustered: false on all ColumnSeries.

@Zahar661
Copy link
Author

Zahar661 commented Oct 25, 2024

image
It is necessary to move the purple columns to the right, and the blue ones to the left.
https://postimg.cc/Cz0Fxddg

@martynasma
Copy link
Collaborator

The only way to do that is to use two X-axes: one for blue columns and the other for purple.

You can make them displayed to the side by manipulating cellStartLocation and cellEndLocation for two axes:
https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#cell-start-end-locations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants