How to change the color of selected item(s) in custom series

Question

Taking the documented example for custom series rendering 'rect' elements, how can I let the color change when an item is selected?

The 1st step is of course to add selectedMode: "single", but then I am stuck.

I tried adding this:

select: {
  itemStyle: {
    color: "#4338ca",
  },
},
emphasis: {
  itemStyle: {
    color: "#be123c",
  },
},

but it does not seem to be taken into account (see the modified example).

Bonus related question: the api.style() method is flagged as deprecated when I use it in VS Code or the online editor, but there is no such deprecation mentioned in the user docs?

Answer 1

You have to define the behaviour for select and emphasis inside the renderItem function.

Example:

renderItem: function (params, api) {

    ...

    return {
        type: 'rect',
        shape: { ... },
        style: { ... },
        select: {
            style: { fill: '#4338ca' }
        },
        emphasis: {
            style: { fill: '#be123c' }
        }
    };
}

The documentation is not maintained perfectly, often times there is information missing or its not quite correct.