How to prevent highcharts from shortening labels with ellipsis

Question

Highcharts is truncating an x-axis label on a bullet chart. I want to prevent this happening and always show the full text without shortening.

I have tried

.highcharts-container { overflow: visible !important; }
.highcharts-axis-labels text
    { 
    overflow: visible !important;  
}

but it seems like the SVG is doing the truncation and ellipsis, not CSS as you can tell by seeing the rendered markup.

<text x="229.0625" style="color: rgb(96, 96, 96); cursor: default;     font-size: 9px; padding: 0px; fill: rgb(96, 96, 96);" text-anchor="middle"   transform="translate(0,0)" y="32" opacity="1">
<tspan>47…</tspan>
<title>47.5k</title>
</text>

I have tried adding the following property in the javascript:

labels: {
    autoRotation: false,
    style: {
    width: '200px',
    'min-width': '200px'
},

But it does not work. How can I prevent highcharts from truncating the label text?

Answer 1

Set proper styles for that labels, see API.

Example:

xAxis: {
    labels: {
        style: {
            textOverflow: 'none'
        }
    } 
}

Answer 2

For a bar chart, I used the following xAxis definition to get long category names to appear inside the plot area (above the bar) and without wrapping or truncating with ellipses:

'xAxis' => [
    'categories' => ['long category one', 'long category two', 'etc'],
    'labels' => [
      'align' => 'left',
      'x' => 3,
      'y' => -5,
      'style' => [
        'fontSize' => '12px',
        'textOverflow' => 'none',
        'whiteSpace' => 'nowrap',
      ],
    ],
  ],

Found the whiteSpace setting in the docs.

https://jsfiddle.net/wittski/5hpag62n/2/

Answer 3

Try override the default behavior by yourself.

  xAxis: {
    labels: {
      useHTML: true,
      formatter() {
        let label = this.value;
        let title = this.value;
        let style = `text-overflow: ellipsis; overflow: hidden;`; // <- YOUR OWN STYLE
        return `<div style="${style}" title="${title}">${label}</div>`;
      }
    },
  },

Style reference: https://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts