XYChart am4core.Button not aligning properly

[awindHydro]

I'm attempting to create a button to give the user to click and switch between different styles but when I create the button it appears at the button of the chart I would like to align it to the top right. I followed the documentation and set align, valign = "right", "top" respectively but no difference is shown.

Also could I be pointed towards how I could make this button into a drop down menu

This is what I've written so far

    function amChartXYChart (containerName, chartName, datalist) {
        let chart = am4core.create( containerName, am4charts.XYChart );
        chart.data = datalist;
        // Create axes
        let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "title";
        // Make an if for this 
        categoryAxis.renderer.labels.template.rotation = -70;
        categoryAxis.renderer.labels.template.dx = -40;
        categoryAxis.renderer.minGridDistance = 30;

        let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis.min = 0;
        valueAxis.max = tierlist[0].count + 5;

        // Create series
        let series = chart.series.push(new am4charts.ColumnSeries()); 
        series.dataFields.valueY = "count";
        series.dataFields.categoryX = "title";

        // Create series bullet labels
        let mediaValueLabel = series.bullets.push(new am4charts.LabelBullet());
        mediaValueLabel.dy = -20;
        mediaValueLabel.label.text = "{count}%";
        mediaValueLabel.label.fontSize = 20;
        mediaValueLabel.label.padding(5, 10, 5, 10);

        // Add title
        let barChartTitle = chart.titles.create();
        barChartTitle.text = chartName;
        barChartTitle.fontSize = 35;
        barChartTitle.fontWeight = "bold";
        barChartTitle.marginBottom = 30;

        /*
            This button always appears at the bottom, right
            If possible I would like this button to have the same alignment
            the default export button has
        */
        let button = chart.chartContainer.createChild(am4core.Button);
        button.label.text = "Chart Options";
        button.align = "right";
        button.valign = "top";
        button.width = "auto";
        button.background.cornerRadius(5, 5, 5, 5);
        button.marginRight = 15;
        button.marginBottom = 50;
        button.events.on("hit", function() {
            //do something
        });
    }

[awindHydro]

Read more information on containers and fixed this issue.

[CaptainHoangLe]

The same question :)

[KayvT]

Same question.. still doesn't work..

[KayvT]

Hello, if someone is reading this. Here is the answer: @awindHydro was right to close this issue..

Make a container inside of the chart and then put the button inside of that container and then set the valign to top and it should work!

For example:

let ButtonContainer = chartHolder.plotContainer.CreateChild(am4core.Container) buttonContainer.align = "right" // or "left" buttonContainer.valign = "top" // or "bottom" let myActualButton = buttonContainer.createChild(am4core.Button)