Formatting text from axis ticks in plotly using tickformat

Question

Is possible to add format to the xaxis and yaxis ticks using tickformat?

The idea is cut long names of axis as:

axiswithaverylongname --> axisw...

In the plotly api reference there's and example to format dates https://plot.ly/javascript/reference/#layout-xaxis-tickformat

and also they refer to the d3 documentation https://github.com/d3/d3-format/blob/master/README.md

from the plotly reference:

tickformat (string) 
default: "" 
Sets the tick label formatting rule using d3 formatting mini-languages 
which are very similar to those in Python. For numbers, see: 
https://github.com/d3/d3-format/blob/master/README.md#locale_format 
And for dates see: https://github.com/d3/d3-time-
format/blob/master/README.md#locale_format We add one item to d3's 
date formatter: "%{n}f" for fractional seconds with n digits. For 
example, "2016-10-13 09:15:23.456" with tickformat "%H~%M~%S.%2f" 
would display "09~15~23.46"

score 3 · Accepted Answer · answered Sep 19 '17 at 20:16

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) {
  Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 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 (Plotly.d3.select(this).html().length > 8) {
      Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5) + '...');
    }
  });
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot" style="width:100%;height:100%"></div>
<button id="cleanButton">Clean x-axis</button>

@alfaz jikani: I'll test it when I have access to a computer with IE11. — Maximilian Peters, Oct 03 '19 at 13:25
@MaximilianPeters, I found working solution for IE11. Reference: https://stackoverflow.com/a/38285239/5492926 `Plotly.d3.selectAll(".xtick text, .ytick text").each(function (d, i) { // Using jquery // Use d.text instead of reading DOM by "Plotly.d3.select(this).html()" $(this).text(d.text.substr(0, 5)); });` — Alfaz Jikani, Oct 04 '19 at 05:47

Formatting text from axis ticks in plotly using tickformat

1 Answers1