chart.js v4 truncate scale/labels

similar questions has been asked here in the past but eventually for older versions of Chart.js. The accepted answers of the questions didn't work.
I have a chart like this:

The code of this chart is this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
new Chart(
document.getElementById("chart-01"), {
type: 'bar',
data: {
labels: ["Test loooooong 1", "Test loooooong 2", "Test loooooong 3"],
datasets: [{ data: [574.48, 140.93, 64.37]}]
},
options: {
scales: {
y: {
ticks: {
callback: function(value) {
return '$ ' + value;
}
}
},
// x : {
// ticks : {
// callback : function(value, index, ticks) { return value.split(0,8)+'...';}
// }
// }
},
plugins: {
legend: {
display: false
}
}
}
}
);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js" integrity="sha512-vCUbejtS+HcWYtDHRF2T5B0BKwVG/CLeuew5uT2AiX4SJ2Wff52+kfgONvtdATqkqQMC9Ye5K+Td0OTaz+P7cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="chart-01" width="500" height="600"></canvas>

<!-- end snippet -->

I am trying to truncate the names on the x-axis after 8 chars and add a '...', So if I am using that commented code block:

x  : {
  ticks : { 
    callback : function(value, index, ticks) { return value.split(0,8)+'...';}
  }
}

I get the error message:

Uncaught (in promise) TypeError: value.split is not a function

Also if I use only the value, without split, I get numbers back but not the label names.

This are links to solutions that did not work for me.

https://stackoverflow.com/a/39537545/3408158
https://stackoverflow.com/a/44418430/3408158

What am I doing wrong?

To get/change the value of the label you have to use the function getLabelForValue.
(here an example from the documentation)

And split is the incorrect function you would need to use substring.
(link to the mdn documentation)

Here all the fixes entered into your example code:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

new Chart(document.getElementById("chart"), {
    type: 'bar',
    data: { 
        labels: ["Test looooong 1", "Test looooong 2", "Test looooong 3"],
        datasets: [{ data: [574.48, 140.93, 64.37]}]
    },
    options: {
        scales: {
            y: {
                ticks: { callback: value => `$ ${value }` }
            },
            x: {
               ticks: { 
                   callback: function(value){
                       let newLabel = this.getLabelForValue(value)
                           .substring(0,8) + '...';
                       return newLabel;
                   }
               }
            }
        }
    }
});

<!-- language: lang-html -->

<script src="//cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart" style="height:184px; width:350px;">
   <canvas id="chart" ></canvas>
</div>

<!-- end snippet -->

> Information: The mentioned solutions don't worked because, as far as I can tell, they are base on he chartjs Verion 2.0+, and since then the chartjs library change substantially.