apache / apache/echarts

[Bug] VisualMap with string category not working

Open
#17,267 6 comments 1 reaction 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.3.3

### Link to Minimal Reproduction

[repro link](https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0&code=PYBwLglsB2AEC8sDeAoWsAmBDMWDOApmAFzJrqx7ACuATgMYGkDa5FszA5HvcLQZwA0sTlgC2NaGCEiQtYBmr1pAXUFsKzABwBOAHQBmYQFYtAJgCMZ4ZwCyOegAsssADI4wAtRvTNjAdj0LYX9zYwAWG1sIABsAa1gAFQIsTm92X39wvUjYcIsABgNrEQBhRwICQlhS4F5U9Iy_AqDhK39jYxtyyuqAIXkAd2gIL3UMjl09f2EzAotwrpF7MCcXWvq08aaANi1W2H8dBZ2bZIbt9mYLfVPYY61jEs4AeVosaABzAlgAKWoIIwtj4OIU9HdChZHs9XAQJHB_oCxiDmMVprN5lYbAB1LAxaDUMCwAbAYajNIaFTkAC-20-tAgGFISFgvCkWAg0HcACMCDFSGBaNQfrTyAAPACCYogeGZsGg4iYInEkmksFF6AAnlKZXKwJqQErOPQcARPnxNZx1dsAG4y6h4-wgZkafWG0gAIhAo0YgxlBA9l1ZpvNDKqLDssQS52B7BiBAAZiQRIwpARaEJXQQxcmuAAJCCfRywADKvH4Mk4rlJpfLyPYAHoG7AnbAwBVKHXWcAYtQxHAwMBuzE-BoMBAxARoHgoNBSNYNJyAEofb4uia8Ee0UicADEADF96UAKIGcKcDQaig0MAvBMrr5K1Abnt8He7nbGPqmCwX9jUmltkIMNZQ4DRnwyN0jW5LAMyDdAp14DAnxBdAmxbLAQDbDsPRVagpA9Yc-wHIcAA1YCwaU8D0VDYDFHc8KkTMJjQ5tW3bH4vXkRRlEIzdiLbIcAE0KKo2jNR3OQFCUaQQQA_9yCpakAG4gA)

### Steps to Reproduce

When using visualMap with categories set to strings I cannot get the bar charts to paint the `inRange` bars. This is the config I use:
```
option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
grid: { containLabel: true },
xAxis: { name: 'amount' },
yAxis: { type: 'category' },
visualMap: {
type: "piecewise",
categories: ['Milk Tea'],
left: 'center',
text: ['High Score', 'Low Score'],
// Map the score column to color
dimension: 2,
inRange: {
color: '#FFCE34'
},
outOfRange: {
color: '#65B581'
}
},
series: [
{
type: 'bar',
encode: {
// Map the "amount" column to X axis.
x: 'amount',
// Map the "product" column to Y axis
y: 'product'
}
}
]
};
```

If instead I use a numeric value in categories (such as using `dimension: 0` and `categories: [89.3]`) it paints the bar correctly. You can view a demo of the problem in the current behavior section.

If I use another column as the category axis the value map works. ([reproduction link](https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0&code=PYBwLglsB2AEC8sDeAoWsAmBDMWDOApmAFzJrqx7ACuATgMYGkDa5FszA5HvcLQZwA0sTlgC2NaGCEiQtYBmr1pAXUFsKzABwBOAHQBmYQFYtAJgCMZ4ZwCyOegAsssADI4wAtRvTNjAdj0LYX9zYwAWG1sIABsAa1gAFQIsTm92X39wvUjYcIsABgNrEQBhRwICQlhS4F5U9Iy_AqDhK39jYxtyyuqAIXkAd2gIL3UMjl09f2EzAotwrpF7MCcXWvq08aaANi1W2H8dBZ2bZIbt9mYLfVPYY61jEs4AeVosaABzAlgAKWoIIwtj4OIU9HdChZHs9XAQJHB_oCxiDmMVprN5lYbAB1LAxaDUMCwAbAYajNIaFTkAC-20-tAgGFISFgvCkWAg0HcACMCDFSGBaNQfrTyAAPACCYogeGZsGg4iYInEkmksFF6AAnlKZXKwJqQErOPQcARPnxNZx1dsAG4y6h4-wgZkafWG0gAIhAo0YgxlBA9l1ZpvNDKqLDssQS52B7BiBAAZiQRIwpARaEJXQQxcmuAAJCCfRywADKvH4Mk4rlJpfLyPYAHoG7AnbAwBVKHXWcAYtQxHAwMBuzE-BoMBAxARoHgoNBSNYNJyAEofb4uia8Ee0UicADEADF96UAKIGcKcDQaig0MAvBMrr5K1Abnt8He7nbGPqmCwX9jUmltkIMNZQ4DRnwyN0jW5LAMyDdAp14DAnxBdAmxbLAQDbDsPRVagpA9Yc-wHIcAA1YCwaU8D0VDYDFHc8KkTMJjQ5tW3bH4vXkRRlEIzdiLbIcAE0KKo2jNR3Hg-AEEEAP_cgqWpABuIA))

The strange thing is that if I duplicate the category column in data and use that to do the valueMap it works ([repro link](https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0&code=PYBwLglsB2AEC8sDeAoWsAmBDMWDOApmAFzJrqx7ACuATgMYGkDa5FszA5HvcLQZwA0sTlgC2NaGCEiQtYBmr1pAXUFsKzABwBOAHQBmYQFYtAJgCMZ4ZwCyOegAsssADI4wAtRvTNjAdj0LYX9zYwAWG1sIABsAa1gAFQIsTm92X39wvUjYcIsABgNrEQBhRwICQlhS4F5U9Iy_AqDhK39jYxtyyuqAIXkAd2gIL3UMjl09f2EzAotwrpF7MCcXWvq08aaANi1W2H8dBZ2bZIbt9mYLfVPYY61jEs4AeVosaABzAlgAKWoIIwtj4OIU9HdChZHs9XAQJHB_oCxiDmMVprN5lYbAB1LAxaDUMCwAbAYajNIaFTkAC-20-tAgGFISFgvCkWAg0HcACMCDFSGBaNQfrTyAAPACCYogeGZsGg4iYInEkmksFF6AAnlKZXKwJqQErOPQcARPnxNZx1dsAG4y6h4-wgZkafWG0gAIhAo0YgxlBA9l1ZpvNDKqLDssQS52B7BiBAAZiQRIwpARaEJXQQxcmuAAJCCfRywADKvH4Mk4rlJpfLyPYAHoG7AnbAwBVKHXWcAYtQxHAwMBuzE-BoMBAxARoHgoNBSNYNJyAEofb4uia8Ee0UicADEADF96UAKIGcKcDQaig0MAvBMrr5K1Abnt8He7nbGPqmCwX9jUmltkIMNZQ4DRnwyN0jW5LAMyDdAp14DAnxBdAmxbLAQDbDsPRVagpA9Yc-wHIcAA1YCwaU8D0VDYDFHc8KkTMJjQ5tW3bH4vXkRRlEIzdiLbIcAE0KKo2jNR3OQFCUaQQQA_9yCpakAG4gA)). So it looks like it might be related to the fact that the data column is being used in the axis

The same can be reproduced with the scatter chart

### Current Behavior

[Using a number in categories reproduction](https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0&code=PYBwLglsB2AEC8sDeAoWsAmBDMWDOApmAFzJrqx7ACuATgMYGkDa5FszA5HvcLQZwA0sTlgC2NaGCEiQtYBmr1pAXUFsKzABwBOAHQBmYQFYtAJgCMZ4ZwCyOegAsssADI4wAtRvTNjAdj0LYX9zYwAWG1sIABsAa1gAFQIsTm92X39wvUjYcIsABgNrEQBhRwICQlhS4F5U9Iy_AqDhK39jYxtyyuqAIXkAd2gIL3UMjl09f2EzAotwrpF7MCcXWvq08aaANi1W2H8dBZ2bZIbt9mYLfVPYY61jEs4AeVosaABzAlgAKWoIIwtj4OIU9HdChZHs9XAQJHB_oCxiDmMVprN5lYbAB1LAxaDUMCwAbAYajNIaFTkAC-20-tAgGFISFgvCkWAg0HcACMCDFSGBaNQfrTyAAPACCYogeGZsGg4iYInEkmksFF6AAnlKZXKwJqQErOPQcARPnxNZx1dsAG4y6h4-wgZkafWG0gAIhAo0YgxlBA9l1ZpvNDKqLCmBka6BiBAAZiQRIwpARaEJXQQxYmuAAJCCfRywADKvH4Mk4rlJxdLyPYAHo67AnbAwBVKDXWcAYtQxHAwMBOzE-BoMBAxARoHgoNBSAUg5yAEofb4uia8Ie0UicADEADFd6UAKIGcKcDQaig0MAvONLr5K1Brrt8LfbnbGPqmCxn9jUmnbQgw1lDgNEfDI3SNbksDTIN0AnXgMAfEF0AbJssBAFs2w9FVqCkD1Bx7PsBwADVgLBpTwPRkNgMUtxwqR0wmFDG2bVsfi9eRFGUfD10IlsBwATTIijqM1Lc5AUJRpBBP9f3IKlqQAbiAA)

![image](https://user-images.githubusercontent.com/32216320/175017851-571b9fa9-cf60-40e4-8e45-04d4f526ffa5.png)

[Using a string in categories reproduction](https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0&code=PYBwLglsB2AEC8sDeAoWsAmBDMWDOApmAFzJrqx7ACuATgMYGkDa5FszA5HvcLQZwA0sTlgC2NaGCEiQtYBmr1pAXUFsKzABwBOAHQBmYQFYtAJgCMZ4ZwCyOegAsssADI4wAtRvTNjAdj0LYX9zYwAWG1sIABsAa1gAFQIsTm92X39wvUjYcIsABgNrEQBhRwICQlhS4F5U9Iy_AqDhK39jYxtyyuqAIXkAd2gIL3UMjl09f2EzAotwrpF7MCcXWvq08aaANi1W2H8dBZ2bZIbt9mYLfVPYY61jEs4AeVosaABzAlgAKWoIIwtj4OIU9HdChZHs9XAQJHB_oCxiDmMVprN5lYbAB1LAxaDUMCwAbAYajNIaFTkAC-20-tAgGFISFgvCkWAg0HcACMCDFSGBaNQfrTyAAPACCYogeGZsGg4iYInEkmksFF6AAnlKZXKwJqQErOPQcARPnxNZx1dsAG4y6h4-wgZkafWG0gAIhAo0YgxlBA9l1ZpvNDKqLDssQS52B7BiBAAZiQRIwpARaEJXQQxcmuAAJCCfRywADKvH4Mk4rlJpfLyPYAHoG7AnbAwBVKHXWcAYtQxHAwMBuzE-BoMBAxARoHgoNBSNYNJyAEofb4uia8Ee0UicADEADF96UAKIGcKcDQaig0MAvBMrr5K1Abnt8He7nbGPqmCwX9jUmltkIMNZQ4DRnwyN0jW5LAMyDdAp14DAnxBdAmxbLAQDbDsPRVagpA9Yc-wHIcAA1YCwaU8D0VDYDFHc8KkTMJjQ5tW3bH4vXkRRlEIzdiLbIcAE0KKo2jNR3OQFCUaQQQA_9yCpakAG4gA)

![image](https://user-images.githubusercontent.com/32216320/175017773-ed1dbba5-5079-441e-aab9-fefea4a68faf.png)

### Expected Behavior

The result should always be
![image](https://user-images.githubusercontent.com/32216320/175017851-571b9fa9-cf60-40e4-8e45-04d4f526ffa5.png)

The fact that the category is used in the axis or not shouldn't affect the value map

### Environment

```markdown
- OS: Windows 11
- Browser: Microsoft edge Version 102.0.1245.44 (Official build) (64-bit)
- Framework: None
```

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