Fix font size and line width in plotly theme

Author: Olivia-Box-Power

R/plotly_theme.R

@@ -1,18 +1,21 @@
+iris <- iris |> dplyr::mutate(Sepal.Length = Sepal.Length * 100)
+
  fig <- plotly::plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)
 
 fig
 
-fig |>
+ fig |>
   theme_af_plotly()
 
+
 theme_af_plotly <-  function(chart,
                              base_size = 14,
-                             base_line_size = base_size / 24,
                              grid = c("y", "x", "xy", "none"),
                              axis = c("x", "y", "xy", "none"),
                              ticks = c("xy", "x", "y", "none"),
                              legend = c("right", "left", "top", "bottom", "none")) {
 
+
   grid   <- match.arg(grid)
   axis   <- match.arg(axis)
   ticks  <- match.arg(ticks)
@@ -25,6 +28,7 @@ theme_af_plotly <-  function(chart,
   afcharts_font <- "Arial"
 
   half_line <- base_size / 2
+  base_line_size = base_size / 24
 
   # Set grid lines dependent on grid arg
   grid_x     <- if (grid %in% c("x", "xy")) TRUE else FALSE
@@ -38,78 +42,115 @@ theme_af_plotly <-  function(chart,
   ticks_x    <- if (ticks %in% c("x", "xy")) "outside" else ""
   ticks_y    <- if (ticks %in% c("y", "xy")) "outside" else ""
 
+
+  y_title <- plotly::plotly_build(chart)$x$layout$yaxis$title |> unclass()
+  x_title <- plotly::plotly_build(chart)$x$layout$xaxis$title |> unclass()
+
   chart |>
     plotly::layout(
       font = list(
-        colour = "black",
-        size = base_size,
+        color = "black",
+        size = base_size * ( 96 / 72),
         family = afcharts_font
       ),
 
-      margin = list(
-        l = 80,
-        b = 80,
-        r = 80,
-        t = 0
-      ),
+      # margin = list(
+      #   l = 80,
+      #   b = 80,
+      #   r = 80,
+      #   t = 0
+      # ),
+
+      # # title
+      # title = list(
+      #   text = "This is the title",
+      #   font = list(
+      #     size = 1.6 * base_size
+      #   ),
+      #   xref = "paper",
+      #   yref = "container",
+      #   xanchor = "left",
+      #   yanchor = "top",
+      #   x = 0,
+      #   y = 1,
+      #   automargin = TRUE,
+      #   pad = list(b = ((half_line * 2) + base_size) * (72 / 96))
+      # ),
 
-      # title
-      title = list(
-        text = "This is the title",
-        font = list(
-          size = 1.6 * base_size
-        ),
-        xref = "paper",
-        xanchor = "left",
-        yanchor = "top",
-        x = 0,
-        y = 1,
-        pad = list(
-          t =  half_line * 2 * (96 / 72)
-        )
-      ),
 
       # x axis
+
       xaxis = list(
+
         fixedrange = TRUE,
 
+        # title
+        title = list(
+          text = x_title,
+          font = list(
+            color = "black",
+            size = base_size * (96 / 72),
+            family = afcharts_font
+          )
+        ),
+
+
         # axis
         showline = axis_x,
         linecolor = light_grey,
-        linewidth = base_line_size * (96 / 72),
+        linewidth = base_line_size * 3.7795,
 
         # ticks
         ticks = ticks_x,
         tickcolor = light_grey,
         ticklen = half_line / 2 * (96 / 72),
-        tickwidth = base_line_size * (96 / 72),
+        tickwidth = base_line_size * 3.7795,
         tickangle = 0,
 
         # grid
         showgrid = grid_x,
-        gridwidth = base_line_size * (96 / 72),
+        gridwidth = base_line_size * 3.7795,
         gridcolor = light_grey
       ),
 
       # y axis
+      annotations = list(
+        xref = "paper",
+        xanchor = "left",
+        x = 0,
+        yref = "paper",
+        yanchor = "bottom",
+        y = 1,
+        text = y_title,
+        showarrow = FALSE,
+        font = list(
+          size = base_size * ( 96 / 72)
+        )
+      ),
+
       yaxis = list(
         fixedrange = TRUE,
 
+        # title
+        title = list(
+          text = NA
+        ),
+
         # axis
         showline = axis_y,
         linecolor = light_grey,
-        linewidth = base_line_size * (96 / 72),
+        linewidth = base_line_size * 3.7795,
 
         # ticks
         ticks = ticks_y,
         tickcolor = light_grey,
         ticklen = half_line / 2 * (96 / 72),
-        tickwidth = base_line_size * (96 / 72),
+        tickwidth = base_line_size * 3.7795,
         tickangle = 0,
 
         # grid
         showgrid = grid_y,
-        gridwidth = base_line_size * (96 / 72),
+        gridwidth = base_line_size * 3.7795,
         gridcolor = light_grey
       ),
 
@@ -118,7 +159,8 @@ theme_af_plotly <-  function(chart,
         bgcolor = "white",
         font = list(
           color = "black",
-          size = base_size
+          size = base_size * (96 / 72),
+          family = afcharts_font
         )
       )
     ) |>
@@ -129,3 +171,15 @@ theme_af_plotly <-  function(chart,
     )
 
 }
+
+
+
+ fig |>
+  theme_af_plotly()
+
+ library(ggplot2)
+ ggplot(data = iris, aes(x = Sepal.Length, y = Petal.Length)) +
+   geom_point() +
+   theme_af() +
+   labs(title = "This is the title")
+