1

I want to apply an ellipsis (...) on the layout's title and I'm not seeing anything to do it as per the documentation, unless I'm missing something.

I've tried adding some trivial custom CSS to the gtitle, highlighted element here to see if I could add the ellipsis this way.

enter image description here

As such:

.main-svg .infolayer .g-gtitle .gtitle {
    color: red !important;
}

And I'm not able to affect how the SVG is being rendered. I'm using plotly.js 2.18.1 in Angular 14.

Any ideas ?

5eb
  • 14,798
  • 5
  • 21
  • 65
Francis Ducharme
  • 4,848
  • 6
  • 43
  • 81
  • `color` is not a valid attribute for `text` elements. It should be `fill`. Then the text color styling works. As far as showing ellipses goes I'm not sure that's possible with css alone, javascript might be needed. – 5eb Jun 15 '23 at 19:55
  • Unfortunately `text-overflow: ellipsis` doesn't work for svg element. Instead, you could define a handler that will alter the element as needed [using a wrapper function](https://stackoverflow.com/a/27723752/2529954), and bind that handler to the 'plotly_relayout' event, ie. you can do the initial call and the binding with `Plotly.newPlot(...).then(function(gd){ handler(); gd.on('plotly_relayout', handler); });` – EricLavault Jun 15 '23 at 20:32

0 Answers0