Check out this combination chart created with Amchart's codepen: https://codepen.io/amcharts/pen/68f79624039495969a04c80b86a90272
"valueAxes": [{
"id": "v1",
"unit": "%",
"position": "right",
"title": "GDP growth rate",
}, {
"id": "v2",
"unit": "$",
"unitPosition": "left",
"position": "left",
"title": "Sales volume (M)"
}],
To align all the labels on the right side, I have created an example here: https://jsfiddle.net/hansyulian/ymb2vcsa/
"valueAxes": [{
"id": "v1",
"unit": "%",
"position": "right",
"title": "GDP growth rate",
}, {
"id": "v2",
"unit": "$",
"unitPosition": "left",
"position": "right",
"title": "Sales volume (M)"
}],
I encountered overlapping labels which I resolved by adding an "offset" to the label:
https://jsfiddle.net/hansyulian/ymb2vcsa/2/
"valueAxes": [{
"id": "v1",
"unit": "%",
"position": "right",
"title": "GDP growth rate",
}, {
"id": "v2",
"unit": "$",
"unitPosition": "left",
"position": "right",
"offset": 70,
"title": "Sales volume (M)"
}],
Further, I disabled the labels using "labelsEnabled": false as shown here:
https://jsfiddle.net/hansyulian/ymb2vcsa/3/
"valueAxes": [{
"id": "v1",
"unit": "%",
"position": "right",
"labelsEnabled": false,// comment this and the label no longer overlapped
"title": "GDP growth rate",
}, {
"id": "v2",
"unit": "$",
"unitPosition": "left",
"position": "right",
"labelsEnabled": false, // comment this and the title no longer overlapped
"offset": 70, // this offset not working if labelsEnabled = false
"title": "Sales volume (M)"
}],
The issue arises where the y-axis title overlaps due to the disabled "offset". Any suggestions for a solution?