amCharts 4 - How To Make Chart Widths Equal With Different Length ValueAxis Labels

Question

In at least amCharts 4, the chart widths seem to be dependent on the length (e.g., the number of digits) of the valueAxis labels. For example, take the charts in this codepen. With the top chart labels set at a precision of 8 and the bottom chart having a max of 5 digits (e.g., "10,000" as the max), the width of the bottom chart can be made equal to the width of the top chart by including the following:

valueAxis2.marginLeft = "32px";

However, if the number of digits in the bottom chart's valueAxis labels changes, then the left margin is no longer correct. For example, uncomment line 22 to see this. How can the chart widths be made equal independently of the valueAxis label length?

This answer discusses a solution for amCharts 3, but there doesn't seem to be a minMarginLeft property in amCharts 4.

Answer 1

Good question. I highly recommend checking out our Working with Containers guide. The last section illustrates the pre-defined Containers for XYCharts.

Any y axes rendered on the left will be in the chart.leftAxesContainer, so you can set those to the same width on each chart, e.g.

// Top chart's left y axis is around 96px (checked via its measuredWidth)
chart1.leftAxesContainer.width = 100;
chart2.leftAxesContainer.width = 100;

Here's a fork:

https://codepen.io/team/amcharts/pen/a0a990fa6420b446508770ccae40ca7d

Screenshot (no playing with margins required!):