Accepted answer

As far as I know there is no way of doing it directly via tickformat but a few lines of JavaScript code will fix it for you.

Plotly.d3.selectAll(".xtick text").each(function(d, i) {, 5));

Using d3's seleectAll wet get all text labels on the x-axis and update the text with the first 5 letters of the initial label.

You can either do it automatically or when the button is pressed in the example below.

var trace1 = {
  x: ["A", "B1", "axiswithaverylongname", "Wow, wait a second, that's way tooooo long"],
  y: [1, 2, 3, 4],
  type: "bar"

var myPlot = document.getElementById('myPlot')
Plotly.newPlot('myPlot', [trace1]);
document.getElementById("cleanButton").addEventListener("click", function(){
  Plotly.d3.selectAll(".xtick text").each(function(d, i) {
    if ( > 8) {, 5) + '...');
<script src=""></script>
<div id="myPlot" style="width:100%;height:100%"></div>
<button id="cleanButton">Clean x-axis</button>

Related Query