Fix Overlapping Detail Text in Gauge Examples #137
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Manahil-Afzal
force-pushed
the
fix-gauge
branch
from
132701d to
887d709
Compare
Ovilia
requested changes
Jan 21, 2026
Contributor
Ovilia
left a comment
Ovilia
left a comment
There was a problem hiding this comment.
You should also run node tool/build-example.js --pattern gauge-speed to generate the thumbnail and commit. Please don't include other thumbnails other than this example.
| @@ -1,6 +1,6 @@ | |||
| { | |||
| "editor.formatOnSave": true, | |||
| "editor.defaultFormatter": "esbenp.prettier-vscode", | |||
Contributor
There was a problem hiding this comment.
Please revert the unrelated changes.
| }; | ||
|
|
||
| export {}; | ||
| export {}; No newline at end of file |
Contributor
Author
There was a problem hiding this comment.
New Updated Done
Manahil-Afzal
force-pushed
the
fix-gauge
branch
from
d5ed562 to
dcfb73a
Compare
Contributor
Author
|
Due to commits issues i goona closed this pr and create a new pr |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
While reviewing the Speed Gauge
example in the ECharts editor, it was observed that the detail text (value and unit) sometimes overlaps with the pointer or the gauge frame, particularly for larger values.
This reduces readability and affects the overall visual presentation of the gauge.
The same code pattern exists in the Progress Gauge example, meaning the issue could appear there as well.
Steps:
. Analyzed the issue in gauge-speed.ts to identify why the detail text overlaps with the pointer.
. Confirmed that the same code structure exists in progress-gauge.ts, making it susceptible to the same problem.
. Raised an issue #135
to track the problem.
Implemented a step-by-step fix in the TypeScript file:
Before:
=> Detail text (value + unit) overlaps with the pointer or gauge frame.
=> For larger values, the value text appears too close to the pointer, reducing readability.
After:
=> Text is now properly centered and clearly visible.
=> No overlap with the pointer or gauge frame.
Local Testing:
. Tested on local build for the full range of values.
. Confirmed that the fix works consistently across all values in the gauge.
Impact:
. Improves readability and visual clarity in the Progress Gauge example.
. Ensures the official editor is consistent with local builds.
. Prevents confusion caused by overlapping detail text in gauges.