Plotly.js shows not full name of trace when hovering over

Question

I made a graph with plotly in angular app, but the trace has a long name. So when I hover over my graph, the name is shortened by putting ... behind it. I really don't want this. How can I change this?

This is my code.

 var text = "Plot_ForecastConfig";
    var layout = {
      showlegend: true,
      legend: {"orientation": "h"},
      yaxis: {
        title: 'Sales',
        titlefont: {
          family: 'Courier New, monospace',
          size: 18,
          color: '#7f7f7f'
        }
      }
    };
    var options = {
      scrollZoom: true,
      showLink: false,
      modeBarButtonsToAdd: [{
        name: 'image',
        title: 'Download plot as a png',
        icon: Plotly.Icons.camera,
        click: function () {
          Plotly.downloadImage(document.getElementById('graph'), {
            filename: text,
            format: 'png',
            height: 700,
            width: 1000
          });
        }
      }],
      modeBarButtonsToRemove: ['toImage', 'zoom2d', 'pan', 'pan2d', 'sendDataToCloud', 'hoverClosestCartesian', 'autoScale2d'],
      displaylogo: false,
      displayModeBar: true,
    };

    Plotly.newPlot('graph', this.drawing, layout, options);

score 3 · Accepted Answer · answered Jan 24 '19 at 14:30

I could get the long name to be displayed by just adding below line in my trace object.

hoverlabel: {namelength :-1}

Here is a working example.

Plotly.plot('graph', [{
  y: [2,1,2],
  name: 'loooooooooooooooooooooooooong text name',
  hoverinfo: "y+name",
  hoverlabel: {namelength :-1},
}])

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph"></div>

Maximilian Peters · Answer 2 · 2019-01-25T17:45:25.187

Plotly has a new attribute namelength which can be used for that purpose, see the other answer by Rajshekar Reddy.

namelength (integer or array of integers greater than or equal to -1)

Sets the length (in number of characters) of the trace name in the hover labels for this trace.

-1 shows the whole name regardless of length.

0-3 shows the first 0-3 characters, and

an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to namelength - 3 characters and add an ellipsis.

If you want to do it manually the solution below still works.

You could either assign the trace name to text as well and set hoverinfo to x+y+text or modify the hovertext object yourself (see here for a more detailed explanation).

var _this = {
  drawing: [{
    x: [1, 2, 3],
    y: [1, 2, 5],
    text: "Yeah, that's a really long name, let's see what Plotly does to it",
    name: "Yeah, that's a really long name, let's see what Plotly does to it",
    hoverinfo: "x+y+name"
  }]
};

var myPlot = document.getElementById('graph1');
Plotly.newPlot(myPlot, _this.drawing);
_this.drawing[0].hoverinfo = 'x+y+text';
Plotly.newPlot('graph2', _this.drawing);


myPlot.on('plotly_hover', function(data) {
  var infotext = data.points.map(function(d) {

    if (d.x > 1) {
      return d.data.name;
    } else {
      return "";
    }
  });

  if (infotext[0] === "") {
    return;
  }
  var hoverinfo = Plotly.d3.selectAll('.hovertext').selectAll('.name');
  var cloned = Plotly.d3.selectAll('.hovertext').append(hoverinfo.property("nodeName"));
  var attr = hoverinfo.node().attributes;
  for (var j = 0; j < attr.length; j += 1) {
    cloned.attr(attr[j].name, attr[j].value);
  }
  cloned[0][0].innerHTML = infotext[0];
  hoverinfo.attr('opacity', 0);
  cloned.attr('opacity', 1);
});

<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<div id='graph1'></div>
<div id='graph2'></div>

Plotly.js shows not full name of trace when hovering over

2 Answers2

Linked