Color overlap issue (with range color and out of range color) for consecutively same values.
- 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/ogvwbgv
### Steps to Reproduce
Observe the options below and the rendered chart (see screenshot). The visual map configuration specifies pieces with gt: 45. than, both the range piece color and the out-of-range default color are being displayed.
At any time, two colors should not be applied to the same sequence of number values on the line.
Similarly, if gte: 45 is used instead of gt: 45, the value 45 should be included in the range piece color, in this case, both the range piece color and the out-of-range default color are still being displayed. For the data point with a value of 45, only the range piece color should be displayed.
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": 45,
"color": "#dd005a",
"label": "≥ 23",
"max": 180
}
],
"outOfRange": {
"color": "#00ACDD"
},
calculable: true,
textStyle: {
fontSize: 12,
color: '#000',
},
height: 100,
},
series: [
{
name: 'Data',
type: 'line',
data: [3, 12, 25, 45, 45, 45, 45, 101, 125, 145, 160, 175],
lineStyle: {
width: 2,
},
},
],
};

### Current Behavior
Both the range visual map color and the default out-of-range color are being displayed for the value 45, especially when consecutive data points have the same value.
When using **gt: 45**, the range piece color should not be applied to the data point with a value of 45. However, when using **gte: 45**, the line for the value 45 should be colored with the range piece color instead of the out-of-range color
### Expected Behavior
The line for the value 45 should not display with both the range piece color and the out-of-range default color.
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.