[Solved]-How to prevent highcharts from shortening labels with ellipsis-Highcharts

You only need to add textOverflow property as none like the given code below to get the first and last tick value fully visible.

xAxis: {
        labels: {
                 style: {
                         fontSize: '9px',
                         color: '#a1a5aa',
                         textOverflow: 'none'
                        }
                }
       }

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

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/