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

[sanganasrikanth9618]

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

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[helgasoft]

duplicate of #18274 and others