High Chart - How to prevent long axis labels from shortening with "..." suffix

Issue:

The following HTML5 chart has the x-axis label name shortened with an ellipsis ("..."), highlighted in yellow. 

We would like to display this label name fully without any truncation. How can this be achieved ?

Solution:

There are two properties that can be set depending on whether you want the label to be auto-rotated after a certain limit or not.

Option 1:  Set the 'autoRotationLimit' property to a lower value such as 40 (default is 80 but you can set it to a value that works for you). The JRXML source code would contain this: 

<hc:chartProperty name="xAxis.labels.autoRotationLimit" value="40"/> 

The label names will not be auto rotated and the label will be word wrapped. The chart will look like this:

Option 2: Set the 'style.textOverflow' property to "none". The JRXML source code would contain this:

<hc:chartProperty name="xAxis.labels.style.textOverflow" value="none"/>

The chart will look like this:

Note 1: The 'style.textOverflow' property is not listed in the Advanced Properties of the Chart Formatting tab, but can be effected through the xml code in the Source tab.

Note 2: The details provided here pertains to the x-axis but there are similar properties for the y-axis.

Definitions:

autoRotationLimit - When each category width is more than this many pixels, we don't apply auto rotation. Instead, we lay out the axis label with word wrap. A lower limit makes sense when the label contains multiple short words that don't extend the available horizontal space for each label.

style.textOverflow - From https://api.highcharts.com/highcharts/xAxis.labels.style, it states "Use textOverflow: 'none' to prevent ellipsis (dots)."

ref: 01605211