plotly / plotly/plotly.R

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

Open
#2,426 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
R
Stars
2.7k
Forks
641
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproducible R example using plotly, lubridate, dplyr, tickvals, and the x-axis rangeslider. Investigate how fixed weekly tick values interact with zoom-driven tick adjustment; done means Monday-based weekly labels remain correct while zooming changes the interval to avoid overcrowding.

Written by the indexing model from the issue text.

Assessment

Tech stack
r
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.