Angular ngx-ECharts - Change color of one specific heatmap cell

Question

As the headline suggests, I am searching for a method to change one specific cell in a echart heatmap. Through a search in the api I found the possibility to change the itemStyle via the setOption() API-method, but it changes the color for all entries of a given series. To be more specific, I would like to change the color of a given field on x-position and y-position.

Example of the final functionality: The following picture shows the demo-heatmap and a blue field on x-pos: 12a, y-pos: friday, which turned blue after clicking on it (example picture).

Answer 1

You can set up a second series containing only the specific heatmap cell:

series: [
    {
    ...
    },
    {
        type: 'heatmap',
        data: [[0, 1, 1]],
    },
]

and use a second visual map which only operates on the second series (keep in mind that visual maps are applied in the order they are given):

visualMap: [
    {
    ...
    },
    {
      seriesIndex: 1,
      show: false,
      inRange: {color: 'lightblue'},
    }
  ],

Here is an example.