egonokhov opened a new issue, #21112:
URL: https://github.com/apache/echarts/issues/21112
### 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 (<anonymous>)
at E (echarts.min.js:35:5077)
at YD (echarts.min.js:45:516014)
at echarts.min.js:45:516308
at Array.forEach (<anonymous>)
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:
<img width="728" height="623" alt="Image"
src="https://github.com/user-attachments/assets/ba720e5b-b8e5-4601-b16c-f16308097d6c";
/>
Requirements:
The parent’s label should appear inside the parent rectangle, not outside
It should work whether colors are solid or gradients
<img width="701" height="419" alt="Image"
src="https://github.com/user-attachments/assets/b8df22ba-b2f9-47b7-9c64-c0d9cc8b6fd2";
/>
<img width="695" height="518" alt="Image"
src="https://github.com/user-attachments/assets/56331ccc-cc6e-477d-a34c-8eb2d6020dd1";
/>
### What does the proposed API look like?
A new option for the position
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
