angular - Plotly.js no muestra el nombre completo de la traza al pasar el cursor sobre ella

Hice un gráfico con plotly en una aplicación de Angular, pero la traza tiene un nombre largo. Entonces, cuando paso el cursor sobre mi gráfico, el nombre se acorta poniendo ... detrás. Realmente no quiero esto. ¿Cómo puedo cambiarlo?

Este es mi código.

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

Respuesta #1

Podría hacer que se mostrara el nombre largo simplemente agregando la siguiente línea en mi objeto de traza.

hoverlabel: {namelength :-1}

Aquí hay un ejemplo funcional.

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>

Respuesta #2

Plotly tiene un nuevo atributo namelength que se puede usar para ese propósito, vea la otra respuesta de Rajshekar Reddy.

longitudDelNombre (entero o arreglo de enteros mayor o igual a -1)

Establece la longitud (en número de caracteres) del nombre del rastro en las etiquetas emergentes para este rastro.

-1 muestra el nombre completo sin importar la longitud.

0-3 muestra los primeros 0-3 caracteres, y

un número entero >3 mostrará el nombre completo si tiene menos de esa cantidad de caracteres, pero si es más largo, se truncará a namelength - 3 caracteres y se añadirá una elipsis.

Si quieres hacerlo manualmente, la solución de abajo todavía funciona.

Podrías asignar también el name del trazo a text y configurar hoverinfo a x+y+text o modificar el objeto hovertext tú mismo (consulta aquí para una explicación más detallada).

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>