CODEWITHSUNDEEP
amchartsamcharts4
bryman79
bryman79

Reputation: 383

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

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.

Upvotes: 2

Views: 870

Answers (1)

notacouch
notacouch

Reputation: 3655

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!):

screenshot of charts adjacent to each, their yaxes are the same width

Upvotes: 1

Related Questions