To have event listener enabled and toggleDataSeries disabled for legend in the same time

[ShuxinLin]

Codepen

Please check codepen here.

Explanation

In the radial bar, I want to add an event listener to onclick of the legend, but I want to disable toggleDataSeries behavior when clicking the legend. In the first step, I add event listener by

          chart: {
            events: {
              legendClick: function(chartContext, seriesIndex, config) {
                console.log(seriesIndex);
              }
            }
          },

And the event listener works! Then I tried to set toggleDataSeries to be false by

        legend: {
          onItemClick: {
            toggleDataSeries: false
          }
       }

Then event listener does not work anymore because the legend is not clickable. Can I have event listener enabled and toggleDataSeries disabled in the same time?

[jkohlin]

Have the same issue. I'd like to handle the toggle myself among other things when I click the legend.

[lampewebdev]

I have the same problem.
I want to hide all the ofter legend besides the clicked legend and I got the code working like that:

      legendClick: function legendClick(chartContext, seriesIndex, config) {
        const { series } = config.config;
        const selectedSeriesItemName = series[seriesIndex].name;
        series.forEach((seriesItem) => {
          const currentSeriesItemName = seriesItem.name;
          if (currentSeriesItemName !== selectedSeriesItemName) {
            chartContext.hideSeries(currentSeriesItemName);
          }
        });
        chartContext.showSeries(selectedSeriesItemName);
      },

but still the toggleDataSeries must be true so my function is fired.

  legend: {
    show: true,
    onItemClick: {
      toggleDataSeries: true,
    },
  },

I would like to stop the toggle and instead of just run my function

[junedchhipa]

Sorry for the very late response. Fixed it.