GridLayout not working as expected

[rferreira98]

Bug description

I'm trying to reproduce a 2 column legend + label layout. First I add set the GridLayout on the topAxesContainer:

chart.topAxesContainer.setAll({
                    x: am5.p50,
                    centerX: am5.p50,
                    width: am5.p100,
                    background: am5.Rectangle.new(root, {
                        fill: am5.color("#ff0000")
                    }),
                    layout: am5.GridLayout.new(root, {
                        maxColumns: 2,
                        fixedWidthGrid: true,
                    })
                })

Then, I set the Legend first in order to get it first(on the left).

legend = chart.topAxesContainer.children.push(
                    am5.Legend.new(root, {
                        background: am5.Rectangle.new(root, {
                            fill: am5.color("#00ff00")
                        }),
                        paddingBottom: 10,
                        marginBottom: 0,
                        marginRight: 0,
                        marginLeft: 0,
                        marginTop: 0,
                        layout: root.gridLayout,
                        useDefaultMarker: true,
                    })
                );

And finally I add the label after to add it to the right.

chart.topAxesContainer.children.push(am5.Label.new(root, {
            layout: root.horizontalLayout,
            marginBottom: 0,
            marginRight: 0,
            marginLeft: 0,
            marginTop: 0,
            background: am5.Rectangle.new(root, {
                fill: am5.color("#0000ff")
            }),
            fontSize: 16,
            text: "Last 6 months",
            fill: am5.color("#797979")
        }))

I should be getting a 2 column layout, with legend and custom label side by side on the topAxesContainer and what I get is:

Environment (if applicable)

    "@amcharts/amcharts5": "^5.1.7",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mdi/js": "^6.5.95",
    "@mdi/react": "^1.5.0",
    "@mui/icons-material": "^5.4.1",
    "@mui/material": "^5.3.1",
    "@reduxjs/toolkit": "^1.7.1",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "i18next": "^21.6.11",
    "i18next-browser-languagedetector": "^6.1.3",
    "mui-scrollable-slider-hook": "^1.0.2",
    "node-sass": "^7.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.15.4",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"

[martynasma]

Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

[rferreira98]

Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

@martynasma will do in a matter of minutes

[rferreira98]

@martynasma here it is https://codesandbox.io/s/intelligent-roentgen-tyg0jg?file=/src/App.js

[zeroin]

If you want to have two columns here, you should use HorizontalLayout instead of GridLayout. Also, set width for the legend to some percent value: https://codesandbox.io/s/young-sound-mfyc93?file=/src/LineChart.js:3849-3872

[rferreira98]

If you want to have two columns here, you should use HorizontalLayout instead of GridLayout. Also, set width for the legend to some percent value: https://codesandbox.io/s/young-sound-mfyc93?file=/src/LineChart.js:3849-3872

Although it looks better, the gridLayout does not work as expected inside the legend: Questions are overflowing

[sassomedia]

@rferreira98 Looks like you may have to change the Legend layout as well. On line 124, you have layout: root.gridLayout but you probably want layout: root.verticalLayout.

[rferreira98]

@rferreira98 Looks like you may have to change the Legend layout as well. On line 124, you have layout: root.gridLayout but you probably want layout: root.verticalLayout.

Having a verticalLayout will not be responsive as per bigger screens. Will always be vertical and will occupy a massive space

[zeroin]

This is a problem on our side, we will fix it in next release. Meanwhile you can solve this by adding a legend into another Container: https://codepen.io/team/amcharts/pen/PoEzyaO/111218e738a8696a07b3c44e2fd66a42

[rferreira98]

@martynasma @zeroin @sassomedia Thank you for the incredible attention to this issue and the workaround as well. Looking forward for the fix. 🚀

[zeroin]

After some testing I find out that I can't apply the fix, as it causes some other issues. So I am afraid having a legend in a additional container might be a permanent solution.

[rferreira98]

If it is so, I'll use the legend workaround. Thank you!