ECharts: Disable default click action on legends

Question

I'm trying to use ECharts to render a simple doughnut chart which I've been able to do. I've noticed by default that the legend will hide the data item on the chart if it is clicked.

I want the user to be able to select the legend to do something (fire an event) which I can do using the events available (https://ecomfe.github.io/echarts-doc/public/en/api.html#events.legendselected) however I want to prevent the default behaviour of hiding/showing the data item on the chart.

In the documentation there is mention of a property on the legend called selectedMode (https://ecomfe.github.io/echarts-doc/public/en/option.html#legend.selectedMode), which prevents the toggling of the series, but it also stops the legend from being selectable entirely.

I've also tried returning false on the events fired for legendselected and legendunselected but to no success.

Has anyone found a way of stopping this behaviour? I'd appreciate any help on this issue.

Here is a fiddle which contains the selectedMode set to false. Remove this flag to see the default behaviour:

legend: {
  orient: "vertical",
  x: "right",
  selectedMode: false,
  data: data.map(d => d.name)
}

https://jsfiddle.net/h44jpmpf/12/

Answer 1

One workaround is to dispatch the legendSelect action in a legendselectchanged event handler to re-select the option that the user clicks. You may want to toggle animations off to prevent jumpy visuals from toggling the data set.

jsfiddle

myChart.on('legendselectchanged', function(params) {

  suppressSelection(myChart, params);  

  // Add custom functionality here 
});

function suppressSelection(chart, params) {
  chart.setOption({ animation: false });

  // Re-select what the user unselected
  chart.dispatchAction({
    type: 'legendSelect',
    name: params.name
  });   

  chart.setOption({ animation: true });
}

Answer 2

As of 2022 it is also possible to add emphasis to series which will do just that. Version "echarts": "^5.3.0".

emphasis: {
        focus: 'series'
      }

Example: https://jsfiddle.net/Nurech/vqro4zg1/3/

Answer 3

option = {
    legend: {
        selectedMode: 'onlyHover'
    }
}

https://github.com/apache/incubator-echarts/issues/11883#issuecomment-568783650