Skip to content

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

Closed
@ShuxinLin

Description

@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?

Activity

changed the title [-]To Disable toggle[/-] [+]To have event listener enabled and toggleDataSeries disabled in the same time[/+] on Aug 8, 2019
changed the title [-]To have event listener enabled and toggleDataSeries disabled in the same time[/-] [+]To have event listener enabled and toggleDataSeries disabled for legend in the same time[/+] on Aug 8, 2019
jkohlin

jkohlin commented on Mar 18, 2020

@jkohlin

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

lampewebdev

lampewebdev commented on May 11, 2020

@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

junedchhipa commented on Nov 1, 2020

@junedchhipa
Contributor

Sorry for the very late response. Fixed it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @jkohlin@ShuxinLin@junedchhipa@lampewebdev

      Issue actions

        To have event listener enabled and toggleDataSeries disabled for legend in the same time · Issue #835 · apexcharts/apexcharts.js