CODEWITHSUNDEEP
javascriptplotly
MWB
MWB

Reputation: 1879

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

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>

Upvotes: 2

Views: 1425

Answers (1)

Derek O
Derek O

Reputation: 19565

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

enter image description here

Upvotes: 1

Related Questions