Skip to content

fix: axisLabel.height should work without backgroundColor (#21504) #21505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SakshamSinghal20 wants to merge 1 commit into
base: master
Choose a base branch
from
+235 −0
Open

fix: axisLabel.height should work without backgroundColor (#21504) #21505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions FIX_SUMMARY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
# Fix for Issue #21504: axisLabel.height property doesn't work without backgroundColor

## Problem Analysis

The issue was that the `height` property on `axisLabel` would not take effect unless a `backgroundColor` was also specified. This was an unexpected dependency that limited the flexibility of label styling.

### Root Cause

Located in `src/label/labelStyle.ts`, the `setTokenTextStyle` function:

1. **Height property was being set**: The `height` property is part of the `TEXT_PROPS_SELF` array (line 485) and was being applied to the text style unconditionally.

2. **Box rendering dependency**: However, in zrender's Text component (the underlying rendering library), the height/width constraints only take effect when there's a visible bounding box. Without a `backgroundColor` or `borderColor`, no box is rendered, and thus the height constraint is ignored.

3. **The problematic code section** (lines 550-575):
- Box properties like `backgroundColor` are only set when `!isBlock || !opt.disableBox`
- If no `backgroundColor` is explicitly provided, the text renders without a bounding box
- Without a bounding box, the `height` constraint has no visual effect

## Solution

The fix ensures that when `height` or `width` is specified without a `backgroundColor`, a transparent background is automatically set. This enables the box rendering in zrender, which allows the height/width constraints to work properly.

### Code Changes

**File**: `src/label/labelStyle.ts`

**Location**: After the box properties section (around line 575)

**Change**: Added the following logic:
```typescript
// If height or width is set but no backgroundColor, set transparent background
// to ensure the box constraints are applied
if ((textStyle.height != null || textStyle.width != null) && textStyle.backgroundColor == null) {
textStyle.backgroundColor = 'transparent';
}
```

### Why This Works

1. **Transparent background is invisible**: Setting `backgroundColor: 'transparent'` doesn't change the visual appearance
2. **Enables box rendering**: It triggers zrender's box rendering logic, which respects height/width constraints
3. **Minimal impact**: Only affects cases where height/width is explicitly set without a background
4. **Backward compatible**: Doesn't change behavior for existing code that already sets backgroundColor

## Testing

Created test file: `test/axis-label-height-without-bg.html`

The test includes three scenarios:
1. **Test 1**: axisLabel with height but NO backgroundColor (the bug case)
2. **Test 2**: axisLabel with height AND backgroundColor (for comparison)
3. **Test 3**: Long labels with height constraint to verify truncation works

### Expected Behavior After Fix

- Labels should respect the `height` property even without `backgroundColor`
- Text overflow should be properly truncated based on the height constraint
- Visual appearance should be the same whether backgroundColor is transparent or not set

## Files Modified

1. `src/label/labelStyle.ts` - Added transparent background fallback logic

## Files Added

1. `test/axis-label-height-without-bg.html` - Test cases for the fix

## Impact Assessment

- **Breaking Changes**: None
- **Performance Impact**: Negligible (only adds one conditional check)
- **Scope**: Affects all text labels where height/width is set without backgroundColor
- Axis labels (xAxis, yAxis, radiusAxis, angleAxis, etc.)
- Series labels
- Any other text elements using the label style system

## Related Issues

This fix resolves GitHub issue #21504 where users reported that `axisLabel.height` had no effect unless `backgroundColor` was also specified.
5 changes: 5 additions & 0 deletions src/label/labelStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -682,6 +682,11 @@ function setTokenTextStyle<TNuance extends TextCommonOptionNuanceBase>(
textStyle.borderColor = inheritColor;
}
}
// If height or width is set but no backgroundColor, set transparent background
// to ensure the box constraints are applied
if ((textStyle.height != null || textStyle.width != null) && textStyle.backgroundColor == null) {
textStyle.backgroundColor = 'transparent';
}
}

export function getFont(
Expand Down
150 changes: 150 additions & 0 deletions test/axis-label-height-without-bg.html
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.