[Feature] Parent labels should appear inside boxes and work with gradient colors for children
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### What problem does this feature solve?
**Parent labels should appear inside boxes and work with gradient colors for children**
I have a treemap chart. I’d like to color some child items with gradient colors and others with solid colors. I also need to display the parent node’s name inside its box.
Currently, this works fine if I use solid colors, but as soon as I try gradients, I get an error.
```
option = {
series: [
{
type: 'treemap',
data: [
{
name: 'Contoso',
upperLabel: {
show: true
},
value: 10,
children: [
{
name: 'unitPrice',
value: 4,
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(20,220,220,1)'
},
{
offset: 1,
color: 'rgba(90,90,90,1)'
}
],
x: 0,
y: 1,
x2: 0,
y2: 0,
type: 'linear',
global: false
}
}
},
{
name: 'sellPrice',
value: 6,
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(20,220,220,1)'
},
{
offset: 1,
color: 'rgba(90,90,90,1)'
}
],
x: 0,
y: 1,
x2: 0,
y2: 0,
type: 'linear',
global: false
}
}
}
]
},
{
name: 'A.Datum',
children: [
{
name: 'unitPrice',
value: 2
},
{
name: 'sellPrice',
value: 20
}
]
}
]
}
]
};
```
When I run this, I get this error in the console:
```
VM264 about:srcdoc:1 failed to run code TypeError: Cannot set properties of undefined (setting '2')
at ni (echarts.min.js:35:48898)
at XD (echarts.min.js:45:516452)
at YD (echarts.min.js:45:516331)
at echarts.min.js:45:516308
at Array.forEach ()
at E (echarts.min.js:35:5077)
at YD (echarts.min.js:45:516014)
at echarts.min.js:45:516308
at Array.forEach ()
at E (echarts.min.js:35:5077)
```
If I remove these two settings:
```
colorSaturation: 0.65,
borderColorSaturation: 0.65,
```
…the gradient works without errors, but the parent label appears outside the box instead of inside
I can’t properly align it within the parent rectangle
Here’s how it currently looks:
Requirements:
The parent’s label should appear inside the parent rectangle, not outside
It should work whether colors are solid or gradients
### What does the proposed API look like?
A new option for the position
Contributor guide
Research direction
Reproduce the provided treemap example with gradient child colors, colorSaturation, borderColorSaturation, and upperLabel.show enabled. Trace the treemap rendering entry point responsible for parent labels and gradient handling; done means parent labels render inside their rectangles without errors for both solid and gradient child colors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100