How to rotate text labels for data points in plotly using javascript

Question

I want to have a line with text labels for the data points. I don't seem to get it working.

Here is an example of what I tried. The result, however, is that the text is horizontal instead of vertical...

Is this only possible with annotations? Or is there also a more direct way to do this (in the data itself)?

var trace1 = {
  x: [0, 1, 2],
  y: [1, 1, 1],
  mode: 'lines+markers+text',
  name: 'Lines, Markers and Text',
  text: ['Text A', 'Text B', 'Text C'],
  textposition: 'top',
  angle: 90, // NOT WORKING
  type: 'scatter'
};
var data = [trace1];
var layout = {showlegend: false};
Plotly.newPlot('myDiv', data, layout);

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.4.2.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Derek O · Accepted Answer · 2021-09-07 15:13:42Z

1

Unfortunately you cannot specify the textangle in the trace for a scatter. As you said, textangle can only be modified using annotations.

Here is a small example of what you could do, looping through coordinates to make the annotations easier to construct (codepen is here):

var trace1 = {
  x: [0, 1, 2],
  y: [1, 1, 1],
  mode: 'lines+markers',
  type: 'scatter'
};

var data = [trace1];
var coordinates = [[0, 1, 2],[1, 1, 1]]
var text = ['Text A', 'Text B', 'Text C']
var annotations = []

for (let i = 0; i<coordinates[0].length; i++) {
  annotations.push({
    x: coordinates[0][i],
    y: coordinates[1][i],
    text: text[i],
    textangle: 90,
    showarrow: false
  })
}

var layout = {showlegend: false, annotations: annotations};
Plotly.newPlot('myDiv', data, layout);

answered Sep 7, 2021 at 15:13

Derek O

20.2k4 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MWB Over a year ago

In the meantime, I indeed solved it using annotations. Thank you @Derek O!

Collectives™ on Stack Overflow

How to rotate text labels for data points in plotly using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related