[SOLVED] Disable item individually (pieChart

Disable item individually (pieChart - ECHARTS)

I tried to disable an option individually in pieChart (ECHARTS) but it doesn't work, neither with silent nor even within itemStyle, whether normal or with emphasis. I need to disable one (or more) slices of the graph, but using the data componentType, to be able to access it later through an event, like:

myChartUse.on("click", ...)

Full code:

const myChartUse = echarts.init(document.getElementById("myChart"));

const option = {

  series: [{
    type: "pie",
    selectedMode: "single",
    selectedOffset: 10,
    // disable all items , but I need to disable it individually in data
    //silent: true,
    data: [{
      name: "Name 1",
      value: 30
    }, {
      name: "Name 2",
      value: 50,
      silent: true
      // or itemStyle: {silent: true}
    }, {
      name: "Value3",
      value: 20
    }]
  }]

}

myChartUse.setOption(option);

<head>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head>

<div id="myChart" style="width: 700px; height: 600px;"></div>

I know that the documentation does not list silent to be used in series.data, but to explain my problem, this argument is what best fits to explain my problem.
Using opacity in itemStyle is not interesting as it is still possible to trigger events on the item (e.g. mouseenter).

I tried this:

myChartUse.dispatchAction({
  type: 'unselect',
  seriesIndex: 0,
  dataIndex: 1
});

But it does not work.

Solution

You can disable select, emphasis and tooltip for each item individually in series.data. Note, that mouse events are still triggered, but in custom events you can choose to ignore "disabled" data items.

Example:

option = {
  tooltip: {},
  series: [
    {
      type: 'pie',
      selectedMode: 'single',
      selectedOffset: 10,
      data: [
        {
          name: 'Name 1',
          value: 30
        },
        {
          name: 'Name 2',
          value: 50,
          select: { disabled: true },
          emphasis: { disabled: true },
          tooltip: { formatter: () => '' }
        },
        {
          name: 'Value3',
          value: 20
        }
      ]
    }
  ]
};


myChart.on('click', (params) => {
  if (params.data.select && params.data.select.disabled) return;
  
  console.log(params);
});