Skip to content

fix(axis): fix chart does not work when using customValues with formatter in time axis label#21352

Merged
plainheart merged 2 commits into
apache:masterfrom
Srajan-Sanjay-Saxena:fix/time-axis-custom-labels
Nov 14, 2025
Merged

fix(axis): fix chart does not work when using customValues with formatter in time axis label#21352
plainheart merged 2 commits into
apache:masterfrom
Srajan-Sanjay-Saxena:fix/time-axis-custom-labels

Conversation

@Srajan-Sanjay-Saxena
Copy link
Copy Markdown
Contributor

fix(time-axis): resolve TypeError when using customValues with formatter on time axis

Brief Information

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

What does this PR do?

Fixes TypeError "Cannot read properties of undefined (reading 'level')" when using customValues with formatter function on time axis.

Fixed issues

  • Resolves GitHub issue with customValues + formatter combination causing runtime errors

Details

Before: What was the problem?

When using customValues with a formatter function on a time axis, ECharts threw a TypeError: "Cannot read properties of undefined (reading 'level')". This occurred because:

  • customValues creates basic ScaleTick objects without time property
  • TimeScale formatter code assumed tick.time always exists
  • Code accessed tick.time.level and tick.time.upperTimeUnit without null checks

After: How does it behave after the fixing?

The time axis now properly handles customValues with formatter functions without throwing errors. The fix:

  1. src/util/time.ts:346 - Added null check: level: tick.time ? tick.time.level : 0
  2. src/scale/Time.ts:208-212 - Wrapped tick.time access in conditional: if (tick.time) { ... }

Testing:

  • Created test/customFormat.html with enhanced styling and custom labels
  • Verified fixes work with npm run prepare && npm run build
  • Confirmed both fixes present in distribution files

Impact:

  • Maintains backward compatibility for existing time axis functionality
  • Enables proper custom tick positioning with formatted labels on time axes

Document Info

  • This PR doesn't relate to document changes
  • The document should be updated later
  • The document changes have been made in apache/echarts-doc#xxx

Misc

Security Checking

  • This PR uses security-sensitive Web APIs.

ZRender Changes

  • This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

test/customFormat.html demonstrates the fix with customValues + formatter combination

Merging options

  • Please squash the commits into a single one when merging.

Other information

Files Modified:

  • src/util/time.ts (leveledFormat function)
  • src/scale/Time.ts (getTicks method)
  • test/customFormat.html (enhanced styling demo)
  • dist/* (rebuilt distribution files)

I am attaching a video for the solution i have added
https://github.com/user-attachments/assets/29d9d047-edab-414d-9512-6dae1cf455ff

@echarts-bot
Copy link
Copy Markdown

echarts-bot Bot commented Nov 10, 2025

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Comment thread dist/extension/bmap.js
…ter on time axis

Root Cause:
- customValues creates basic ScaleTick objects without time property
- TimeScale formatter code assumed tick.time always exists
- Accessing tick.time.level and tick.time.upperTimeUnit without null checks

Solution Applied:
1. src/util/time.ts:346 - Added null check: level: tick.time ? tick.time.level : 0
2. src/scale/Time.ts:208-212 - Wrapped tick.time access in conditional: if (tick.time) { ... }

Testing:
- Created test/customFormat.html with enhanced styling and custom labels
- Verified fixes work correctly with customValues + formatter combination

Impact:
- Resolves GitHub issue with customValues + formatter combination
- Maintains backward compatibility for existing time axis functionality
- Enables proper custom tick positioning with formatted labels on time axes
Comment thread test/customFormat.html Outdated
Comment thread src/scale/Time.ts
each(ticks, tick => {
upperUnitIndex = Math.min(upperUnitIndex, indexOf(primaryTimeUnits, tick.time.upperTimeUnit));
maxLevel = Math.max(maxLevel, tick.time.level);
if (tick.time) {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that TypeScript suppresses this TypeError as per the current tsconfig.json, where the strictNullChecks option is disabled. But if we enable it, there are many errors to be fixed. For simplicity, I agree with your current fix by adding the safeguard.

@100pah How do you think about this?

@plainheart plainheart requested a review from 100pah November 12, 2025 18:09
@plainheart plainheart added this to the 6.0.1 milestone Nov 12, 2025
@plainheart plainheart added the PR: regression fix This PR is to fix regression issues label Nov 12, 2025
@github-actions
Copy link
Copy Markdown
Contributor

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-21352@3010cb8

- Moved test case from standalone customFormat.html to existing axis-customTicks.html
- Added test demonstrating time axis with customValues + formatter combination
- Verifies the fix for TypeError when accessing tick.time.level
@plainheart plainheart changed the title fix(time-axis): resolve TypeError when using customValues with format… fix(axis-time): fix chart can't work when using customValues with formatter in axis label Nov 14, 2025
@plainheart plainheart merged commit aa9db72 into apache:master Nov 14, 2025
@echarts-bot
Copy link
Copy Markdown

echarts-bot Bot commented Nov 14, 2025

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

@plainheart plainheart changed the title fix(axis-time): fix chart can't work when using customValues with formatter in axis label fix(axis): fix chart does not work when using customValues with formatter in time axis label Dec 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: doc unchanged PR: regression fix This PR is to fix regression issues size/XS

Projects

None yet

2 participants