plotly / plotly/plotly.R

Dynamic Axis Labels (Ticks) Misalignment with Data Points and Rangeslider

Abierto
#2,426 2 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
R
Estrellas
2.7k
Forks
641
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

Description:

In my Plotly chart with a rangeslider, I'm facing a dilemma with axis labels (ticks). Without using tickvals, the chart incorrectly displays Sunday as the start of the week. When using tickvals to correct this, the axis labels don't dynamically adjust when zooming out, leading to overcrowding.

Expected Behavior:

  • The x-axis should consistently display Monday as the start of each week.
  • When zooming out, the axis should dynamically adjust to a coarser interval (e.g., every month, every quarter, or every year) to maintain readability.
  • The rangeslider should allow smooth navigation while preserving appropriate tick density at different zoom levels.

Actual Behavior:

  1. Without tickvals:
  • The chart incorrectly uses Sunday as the start of the week.

  • Zooming functions work as expected, with appropriate tick density at different zoom levels.

Image

  1. With tickvals:
  • The chart correctly displays Monday as the start of the week.

  • When zooming out, the axis doesn't adjust to a more appropriate interval, resulting in overcrowded and illegible labels.

Image

Reproducible Example:

library(shiny)
library(plotly)
library(lubridate)
library(dplyr)

# Example data
data <- data.frame(
  date = seq(as.Date("2024-01-01"), Sys.Date(), by = "day"),  
  value = runif(length(seq(as.Date("2024-01-01"), Sys.Date(), by = "day")), 10, 100)  
)

# Aggregate data by week
data_weekly <- data %>%
  mutate(week = floor_date(date, unit = "week", week_start = 1)) %>%
  group_by(week) %>% 
  summarise(value = sum(value)) 

# Create a plot with the week start as the x-axis
fig <- plot_ly(data = data_weekly,
               x = ~week,  
               y = ~value,  
               type = 'bar') %>%
  layout(xaxis = list(
    range = c(floor_date(max(data$date) - months(3) + days(4),
                         unit = "week", week_start = 1),  # Set the x-axis range starting 3 months before the latest date
              max(data$date + days(4))),  # Extend the range to the maximum date (with 4 extra days for buffer)
    tickvals = data_weekly$week  # Use the start of each week as the ticks on the x-axis
  )
  )


fig %>%
  config(displayModeBar = FALSE) %>%
  layout(xaxis = list(rangeslider = list(visible = TRUE)))  # Add a range slider for the x-axis

Additional Notes:

  • The issue arises from the need to use tickvals to enforce Monday as the week start, which then prevents Plotly's automatic tick adjustment.
  • An ideal solution would combine correct week start representation (Monday) with dynamic tick adjustment when zooming.

System info

R version: 4.3.3 (2024-02-29)
Plotly version: 4.10.4
Operating System: Linux 5.15.173.1-1.cm2

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con el ejemplo reproducible en R usando plotly, lubridate, dplyr, tickvals y el x-axis rangeslider. Investiga cómo interactúan los valores de ticks semanales fijos con el ajuste de ticks provocado por el zoom; se considera terminado cuando las etiquetas semanales basadas en lunes siguen siendo correctas mientras el zoom cambia el intervalo para evitar la saturación.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
r
Área
data-visualization
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.