typescriptechartsapache-echarts

Echarts apply visualMap to specific data points


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.


Solution

  • 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'
              }
            }
          }
        }
      ]
    };