Echarts apply visualMap to specific data points

Question

I have a line chart. I want to change the color of only specific data points. I tried using the visualMap like this:

      visualMap: [
        {
          show: false,
          type: 'piecewise',
          pieces: [
            {
              value: 3,
              color: 'pink',
            },
          ],
          outOfRange: { color: 'green' },
        },
      ],

The issue is, it is coloring all the data points with value 3 pink. I only want to color specific points (specified by an x and y value or an id).

How to achieve this? I am providing the data to the chart as a dataset:

      dataset: {
        dimensions: ['id', 'observation', 'value'],
        source: this.chart.data,
      },

observation is the x-axis category and value is the y-axis value, id is just an id string.

Answer 1

I dont think it is possible to apply visualMaps to specific data points.

However, I see mutliple ways to accomplish what you are trying to do:

1. dont use a dataset and make use of data.itemStyle instead

2. Use a second series on top of the first one which only contains your specific values

3. Even better what @Asim commented: You can pass a function to itemStyle.color

Example:

const data = [{id: 0, y: 150}, {id: 1, y: 230}, {id: 2, y: 224}, {id: 3, y: 200},
              {id: 4, y: 140}, {id: 5, y: 147}, {id: 6, y: 210}]

option = {
  dataset: {source: data},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      symbolSize: 8,
      itemStyle: {
        color: (params) => {
          if ([2,3,5].includes(params.data.id)) {
            return 'red';
          } else {
            return 'green'
          }
        }
      }
    }
  ]
};