R Plotly ScatterPolar chart - how to rotate labels individually? - r

Question

I'm trying to make a simple scatterpolar chart in R Plotly that has 60+ categorical labels on the radial axis. Because there's so many labels, the default method of placing the labels results in them overlapping each other at the top and bottom of the chart. I've tried setting layout.polar.angularaxis.tickangle to 90, -90, etc, but that rotates ALL labels by that amount. Is there a way to either A) rotate each individual label by a specified value such that I can set some labels to -90 degrees, others to -45, others to 0, others to +45, etc... or B) leave the label rotations at 0 (as they are now), but dodge them a bit so they don't overlap at the top and bottom of the chart? I think B would be easier and preferred, but not sure if either A or B are possible.
Here's a minimum reproducible example:
labs1 <- c("Red ", "Green ", "Blue ", "Yellow ", "Orange ",
"Purple ", "Pink ", "Black ", "White ", "Gray ")
labs2 <- c("Bookshelf", "Television", "Refridgerator",
"Toolbox", "Xylophone" , "Chromosome")
labs <- sample(paste0(rep(labs1, each = 6), rep(labs2, times = 10)), 60, replace = F)
df <- data.frame(Label = labs,
Radius = sample(0:100, 60, replace = F))
plot_ly(df) %>%
add_trace(type = 'scatterpolar', mode = 'markers',
r = ~Radius,
theta = ~Label,
fill = 'toself')
And here's the result:

Answer 1

It's been a while since you asked, but I just ran across your question. I've got a workaround.
If you'd like to duplicate the data I've used, I used set.seed(35) before calling the creation of df.
This uses the library htmlwidgets in addition to plotly.
I've added margin to the layout to account for label rotation. This may need to be modified. (For example, if you had really long labels, the margin would need to be larger.)
In the onRender call, I have several things happening.
The function detector: checks for labels that have collided with each other
The function angler: extracts the tick angle the label is associated with
The function quad: identifies which quadrant of the circle it's working with, then rotates the text accordingly
lbls is a node list of every label in the plot.
The for loop rotates through lbls, sending every two labels to the function detector. If a collision is detected, the indicators are sent to the angler function (which calls the quad function).
It's not perfect, but it works.
library(plotly)
library(htmlwidgets)
plot_ly(df, type = 'scatterpolar', mode = 'markers',
r = ~Radius, theta = ~Label, fill = 'toself') %>%
layout(margin = list(t = 75, r = 75, b = 75, l = 75)) %>% # make room for rotated labels
onRender(
"function(el, x) {
function detector(r1, r2) {
var r1 = r1.getBoundingClientRect(); /* catch associated real estate */
var r2 = r2.getBoundingClientRect();
return !(r2.left > r1.right || /* check for collisions */
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);
}
function angler(ind) { /* get tick angle to rotate label */
var par = lbls[ind].parentNode.parentNode.children[ind];
var parAt = par.getAttribute('transform');
/* send extracted angle to quad function*/
quad(/(?<=rotate\\()[^)]*/.exec(parAt)[0], ind); /* using regex, after 'rotate(' -- except ')' */
}
function quad(ang, ind) {
var ang = Math.abs(Number(ang)); /* make the angle a positive number */
var gimmeXform = lbls[ind].getAttribute('transform'); /* extract values to modify */
var xer = lbls[ind].getAttribute('x'); /* 3rd & 4th quad, ctrl rotation pt */
var yer = lbls[ind].getAttribute('y'); /* 3rd & 4th quad, ctrl rotation pt */
if(ang <= 90) {
tang = ang * -.3; /* rotate ang * -x, text-anchor: start */
tanch = 'start';
} else if (ang > 90 && ang <= 180) {
tang = (180 - ang) * 0.3; /* rotate ang * +x, text-anchor: end */
tanch = 'end';
} else if (ang > 180 && ang < 270) {
tang = (ang - 180) * -.3; /* rotate ang * -x, text-anchor: end */
tang = '' + tang + ',' + xer + ',' + yer; /* add rotation controls*/
tanch = 'end';
} else {
tang = (360 - ang) * 0.3; /* rotate ang * +x, text-anchor: start */
tang = '' + tang + ',' + xer + ',' + yer; /* add rotation controls*/
tanch = 'start';
} /* rotate text */
lbls[ind].setAttribute('transform', gimmeXform + 'rotate(' + tang + ')');
lbls[ind].setAttribute('text-anchor', tanch);
}
lbls = document.querySelectorAll('g.angularaxistick > text');
inds = [];
for(i = 0; i < lbls.length; i+=2) {
if(detector(lbls[i], lbls[i + 1])) { /* if collision detected */
angler(i);
angler(i + 1);
}
}
}"
)
Whether you've plotted it with a ton of real estate:
Or very little real estate, it alters the labels:
FYI: if all of the labels overlap, it won't work.