adobe / adobe/react-spectrum-charts

Include earliest year in time axis with year granularity for Line charts

Open
#584 2 comments 0 reactions 0 assignees View on GitHub
bug good first issue open for contribution
Dominant language
TypeScript
Stars
127
Forks
29
Avg merge
7d 2h
Merged PRs (30d)
21

Description

### Provide a general summary of the feature here

'year' granularity is supported for `Axis` but on linear scales the earliest year in the data is not added as an axis tick. The date value isn't right at the beginning of the year. Even if the earliest date value is the first day of the year, the first year won't have a tick value. This is most apparent on Line charts.

### 🤔 Expected Behavior?

The earliest and latest year the data should be reflected in time axes with year granularity so user's have better visual context for the date range reflected in the visualization.

### 💁 Possible Solution

Adding a data transform for the datetime dimension that applies a floor to the date value, then using that in the axis scale should work. A challenge with this approach is that we don't have access to the dimension name in the axisSpecBuilder, and we want to minimize cohesion.

### 🔦 Context

If there isn't a first tick on the axis for the lowest visible year, it's confusing to interpret the date range on the visualization at a glance.

### 💻 Examples

[](url)

![Image](https://github.com/user-attachments/assets/23c61b20-e8d9-4247-87da-0eeb9d4c71ce)

### 🧢 Your Company/Team

Adobe

Contributor guide

Open the contributing guide

Research direction

Start by tracing year granularity through Axis and the axisSpecBuilder, then reproduce the behavior with a Line chart whose earliest date is not at the start of the year. The work is done when time axes show ticks for both the earliest and latest years represented by the visible data.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
data-visualization, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.