VisualMap not applying colors in Line Chart but works correctly in Bar Chart when only min value is provided
- 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
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