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 ?
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.
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)."