chart.js v4 truncate scale/labels

Question

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:

    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
            }
          }
        }
      }
    );

<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>

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?

winner_joiner · Accepted Answer · 2023-02-16T07:03:21.613

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:

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;
                   }
               }
            }
        }
    }
});

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

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.

chart.js v4 truncate scale/labels

1 Answers1