0
190
ViewsHow 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>
·
Juan Pablo Isaza
1 answers
Answer question0
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);
·
Juan Pablo Isaza
Report
Answer question