apache / apache/echarts

Color overlap issue (with range color and out of range color) for consecutively same values.

Open
#20,681 2 comments 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/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,
},
},
],
};
![Visual Map](htt![range-visual-map](https://github.com/user-attachments/assets/559765d3-e449-487c-ade6-28c5de47279b)

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.