Amchart combination chart label overlapped when labels disabled

1
votes

I have a combination chart from amchart's codepen here: 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)"
  }],

I want to put all the labels to the right side, so I make this example as follow: 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 noticed that the labels overlapped and it can be solved by adding some "offset" to label as follow: 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)"
  }],

Then I try to disable the labels by using "labelsEnabled" : false as follow: 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 result is y axis title overlapped as the "offset" is being disabled. Is there any way to fix this?

2
javascriptcssamcharts

2 Answers

0
votes

You can leave labelsEnabled set to true and set addClassNames to true as well.

Then hide the labels using CSS:

.value-axis-v2 .amcharts-axis-label {
    visibility: hidden;
}

Check the example here: https://jsfiddle.net/ymb2vcsa/7/

0
votes

Ok, apparently one of my colleague give me the answer but he refused to answer here (credits to TCY) just before we raise as support ticket to AmCharts. Apparently there is a simple hack using fontSize : 0 where we can hide the text of label as follow:

https://jsfiddle.net/hansyulian/ymb2vcsa/8/

"valueAxes": [{
    "id": "v1",
    "unit": "%",
    "position": "right",
    "labelsEnabled": true, // comment this and the label no longer overlapped
    "title": "GDP growth rate",
    "fontSize": 0
  }, {
    "id": "v2",
    "unit": "$",
    "unitPosition": "left",
    "position": "right",
    "labelsEnabled": true, // comment this and the title no longer overlapped
    "offset": 70, // this offset not working if labelsEnabled = false
    "title": "Sales volume (M)",
    "fontSize": 0
  }],

which makes the chart makes more sense while we can apply legend in our chart in order to make people able to see what is the column represented in each chart type