How to calculate needle position in plotly gauge chart - r

Question

I'm trying to create a gauge chart using plotly in R/Shiny and am having a hard time figuring out how to determine the (x,y) coordinates of the point of the needle depending on value.
My gauge min = 18792 and max = 29472, with a mid-point of 24132. I use the following code to calculate (x,y) coords:
x1 = round(0.5 + (0.2 * cos(deg2rad(180-degs))), digits = 3)
y1 = round(0.5 + (0.2* sin(deg2rad(180-degs))), digits = 3)
I'm assuming the circle origin is (0.5,0.5). I need the needle to be ~ 0.2 in length (so r = 0.2).
As expected, whenever the minimum value is reached (18792), the needle position is (0.3, 0.5), and, reviewing it on screen, looks normal:
However, when the value reaches mid-point (24132), while (x,y) come up as expected (0.5, 0.7), the needle doesn't seem to be as long as the previous example:
The code I am using is as follows. You can switch between min and mid by commenting out the appropriate county value:
max = 29472
min = 18792
california = 23364
county = 24132
# county = 18792
min_label = paste0("$", format(min, big.mark = ","))
max_label = paste0("$", format(max, big.mark = ","))
california_label = paste0("$", format(california, big.mark = ","))
county_label = paste0("$", format(county, big.mark = ","))
# Define needle points
perDeg = (max - min)/180
degs = round((county - min)/perDeg, digits = 0)
deg2rad <- function(deg) { deg * pi / 180 }
# Define [x2,y2] - the needle point
x1 = round(0.5 + (0.2 * cos(deg2rad(180-degs))), digits = 3)
y1 = round(0.5 + (0.2* sin(deg2rad(180-degs))), digits = 3)
basePlot <- plot_ly(
type = "pie",
values = c(40, 10, 40, 10),
labels = c(" ", min_label, " ", max_label),
rotation = 108,
direction = "clockwise",
hole = 0.7,
textinfo = "label",
textposition = "outside",
hoverinfo = "none",
domain = list(x = c(0, 1), y = c(0, 1)),
# marker = list(colors = c('rgb(100, 100, 255)', 'rgb(100, 100, 255)', 'rgb(100, 100, 255)', 'rgb(100, 100, 255)')),
showlegend = FALSE,
sort = FALSE
)
basePlot <- add_trace(
basePlot,
type = "pie",
values = c(50, 50),
labels = c("Estimated Annual Cost of Living", " "),
rotation = 90,
direction = "clockwise",
hole = 0.7,
textinfo = "label",
textposition = "inside",
hoverinfo = "none",
domain = list(x = c(0, 1), y = c(0, 1)),
# marker = list(colors = c('rgb(255, 255, 255)', 'rgb(255, 255, 255)')),
showlegend= FALSE
)
basePlot <- layout(
basePlot,
shapes = list(
list(
type = 'path',
path = paste0('M 0.5 0.5 L ', x1, ' ', y1, ' Z'),
xref = 'paper',
yref = 'paper',
fillcolor = 'rgb(226,210,172)'
)
),
annotations = list(
list(
xref = 'paper',
yref = 'paper',
x = 0.5,
y = 0.4,
showarrow = FALSE,
text = paste0('<b>', county_label, '</b>')
)
)
)
basePlot
There has to be something that I'm totally missing. Any help is greatly appreciated!

Answer 1

I know this is a little after the fact, but I've just been experiencing the exact same issue, but with the Python API. I didn't need my guages to be absolutely precise and 'near enough' would do. I resolved the issue by doubling the radius value in the y-axis.
This produced acceptable results and I assume it's because plotly treats both x and y axis as a value between 0 and 1.0. I'm using a rectangular display panel which means x=0.1 and y=0.1 are different measures. Hope this helps somebody else!

Answer 2

**For Python - I had this same issue but using solely Python
In my case, it was because the semi-circle was not actually a semi-circle. If you plot the grid behind your chart using
fig.update_layout(xaxis={'showgrid': True, 'showticklabels':True})
you may find the radius of your semi-circle is not the same along the x & y axis. To fix this, I found another parameter and added another line:
fig.update_layout(autosize=False)
Plot the grid again to check, but for me this made my gauge the same radius along both the x & y axis. Then, my arrow/indicator was the same length all the way around and pointed accurately. Another potential trick, if you want to have your arrow not extend all the way to the outer edge, you can play around with this param:
standoff=30 #try numbers to see what works
Put this param within the arrow annotation and play around with a few values
#TWCars: you can manually add text anywhere on the diagram with a line like this:
fig.add_annotation(x=-.5, y=.5, text="<b>Text</b>", showarrow=False)
where x and y values are the position on the grid the text will display (b tags are to bold, can remove). This is somewhat hacky but could be a fine solution if your figure is static and need the text in one spot at all times.

Answer 3

I would like to put the labels of my doughnut charts in the middle of those, but I tried a solution and it doesn't appear where I want. Here is our code:
p1 <- plot_ly(tab2, labels = ~c("Domicile-Travail","Domicile-ecole","Courses-achats","Utilisation professionnelle","Promenade-loisirs","Autre"), values = ~prop, type = 'pie',textposition = 'middle right',
textinfo = 'percent',subtitle="B", hole= "0.5",domain = list(x = c(0, 0.45), y = c(0, 1)),insidetextfont = list(color = '#FFFFFF'),
hoverinfo = 'text')
p2 <- plot_ly(tab3, labels= ~c("Domicile-Travail","Domicile-ecole","Courses-achats","Utilisation professionnelle","Promenade-loisirs","Autre"), values = ~prop, type = 'pie', textposition = 'middle left',
textinfo = 'percent',hole= "0.5", domain = list(x = c(0.55,1), y = c(0, 1)), insidetextfont = list(color = '#FFFFFF'),
hoverinfo = 'text', annotations=list(text="B",x=0,y=0,label=2013))
subplot(p1,p2)%>%
layout(title = "Nombre d'accidents par type de trajet ",
xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE))