How can I set the max-width to each data.labels?

[Shahzayb]

As you can see, the large label is taking 50% of the canvas width. I just want to set the max width to label with truncation (...) & show the full label in the tooltip when hovering over the truncated label.

Also, when I hover on any bar it shows the same label twice, how can I remove the duplicate label?

Here's the full example: https://codesandbox.io/s/heuristic-frost-z2pfd?file=/src/App.js

Also want to do the same thing (set max width + trauncate) with the legend. (see below image)

[LeeLenaleee]

You could use a custom tick callback for the x axis to achieve this:

x: {
  ticks: {
    callback: function(val, index, ticks) {
      const tickText = this.getLabelForValue(val);

      return tickText.length > 10 ?
        `${tickText.substring(0, 9)}...` :
        tickText;
    }
  }
},

https://codesandbox.io/s/muddy-snow-jgg5m?file=/src/App.js

[Shahzayb]

How can I show the full version inside tooltip?

[LeeLenaleee]

You would need to write a custom plugin for that that listens to the afterEvent, check if a label is hovered and then show a tooltip (not sure if you can use the build in tooltip)