apache / apache/echarts

[Feature] Parent labels should appear inside boxes and work with gradient colors for children

Open
#21,112 1 comment 1 reaction 0 assignees View on GitHub
new-feature
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:

Image

Requirements:
The parent’s label should appear inside the parent rectangle, not outside
It should work whether colors are solid or gradients

Image

Image

### What does the proposed API look like?

A new option for the position

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.