apache / apache/echarts

VisualMap not applying colors in Line Chart but works correctly in Bar Chart when only min value is provided

Open
#20,725 1 comment 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.5.1

### Link to Minimal Reproduction

https://codepen.io/Srikanth-Sangana/pen/pvzGmYa

### Steps to Reproduce

1. Initialize an ECharts instance.
2. Use the provided Line Chart configuration with visualMap.type = 'piecewise'.
3. Set a condition with only the min value (e.g., { gt: 50, color: '#FF0000' }).
4. Observe that the color is not applied to the Line Chart.
5. Use the same visualMap configuration in a Bar Chart.
6. Observe that the color is applied correctly in the Bar Chart.

Bar chart options :
option = {
title: {
text: 'Bar Chart with VisualMap',
left: 'center',
},
tooltip: {
trigger: 'axis',
},
grid: {
left: '10%',
right: '10%',
bottom: '15%',
containLabel: true,
},
xAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
name: 'Month',
},
yAxis: {
type: 'value',
name: 'Value',
},
visualMap: {
type: 'piecewise',
show: true,
position: 'top',
orient: 'horizontal',
scrollable: true, // Enables scrolling for many conditions
itemWidth: 20,
itemHeight: 16,
pieces: [
{ gt:50, color: '#FF0000'}
],
calculable: true,
textStyle: {
fontSize: 12,
color: '#000',
},
height: 100,
outOfRange: {
color: '#00ACDD'
}
},
series: [
{
name: 'Data',
type: 'bar',
data: [3, 12, 25, 45, 65, 78, 90, 101, 125, 145, 160, 175],
itemStyle: {
color: function (params) {
let value = params.value;
return value > 50 ? '#FF0000' : '#00ACDD';
}
}
}
]
};

Line chart Options:
option = {
title: {
text: 'Line Chart with VisualMap',
left: 'center',
},
tooltip: {
trigger: 'axis',
},
grid: {
left: '10%',
right: '10%',
bottom: '15%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
name: 'Month',
},
yAxis: {
type: 'value',
name: 'Value',
},
visualMap: {
type: 'piecewise',
show: true,
position: 'top',
orient: 'horizontal',
scrollable: true, // Enables scrolling for many conditions
itemWidth: 20,
itemHeight: 16,
pieces: [
{ gt:50, color: '#FF0000'}
],
calculable: true,
textStyle: {
fontSize: 12,
color: '#000',
},
height: 100,
outOfRange: {
"color": "#00ACDD"
}
},
series: [
{
name: 'Data',
type: 'line',
data: [3, 12, 25, 45, 65, 78, 90, 101, 125, 145, 160, 175],
lineStyle: {
width: 2,
},
},
],
};

### Current Behavior

1. In the Line Chart, the visualMap does not apply the expected color when only min is provided.
2. The same configuration works correctly in the Bar Chart, where values above 50 get colored as expected.

### Expected Behavior

1. The visualMap should apply the specified color to the Line Chart when the min condition is met, just as it does in the Bar Chart.

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodePen minimal reproduction and compare the piecewise visualMap behavior between the line and bar series using the provided options. Trace the visualMap handling for line-series values, then verify that a piece containing only gt: 50 colors line data above 50 consistently with the bar chart.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.