[Bug] VisualMap with string category not working

[DavidMarquezF]

Version

5.3.3

Link to Minimal Reproduction

repro link

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)

The strange thing is that if I duplicate the category column in data and use that to do the valueMap it works (repro link). 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

Using a string in categories reproduction

Expected Behavior

The result should always be

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

Environment

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

Any additional comments?

No response

[PrzemoRevolve]

I'm also experiencing this issue. In my case a temporary workaround was to add another dimension, like "ID", (or just add another, redundant dimension with the same data) and use that for the visualMap.

[tribuipi]

I got the same issue. If the first data of my categorical column looks like a numeric value, even if it's a string like 1.0, the string categories won't work anymore.

Buggy demo

Original example from the documentation

[zyn-1121]

I'm also experiencing this issue.Do you have any good solutions？

[helgasoft]

Was going to post about the same bug when I found this thread. @DavidMarquezF , I do not think this is about numeric vs string categories. String categories are ok. The problem with your second example is y:'product' with dimension:2(='product'). If you replace with: y: 'amount' with dimension:2 it works:

  visualMap: {
    type: "piecewise",
    categories: ['Tea'],
    dimension: 2,
    left: 'center',
    inRange: {color: '#FFCE34'},
    outOfRange: {color: '#65B581'}
  },
  series: [{
      type: 'bar',
      encode: { x: 'score', y: 'amount' }
  }]

Edit: oops, you found that already ("If I use another column as the category axis the value map works.").

In essence, visualMap.piecewise.dimension cannot be equal to the category axis in series-bar.encode.

The inconvenient workaround is to duplicate the category column, as suggested by @PrzemoRevolve. Demo Code

NB: @tribuipi, you found a valid bug, but different than the current issue. Could you please post it separately?