Search code examples
javascriptchartsdevextreme

DevExtreme onLegendClick prevent onSeriesClick

I want to show/hide series by clicking on the legend of the chart, and to call another function when I click on the actual chart (on a bar, line, etc). For this we can use 2 functions:

onLegendClick: function (e) {
    console.log('on Legend Click');
    var series = e.target;
    if (series.isVisible()) {
       series.hide();
    } else {
       series.show();
    }
},
onSeriesClick: function (e) {
   console.log('on Series Click');
   // more code here
}

In DevExtreme documentation on click handling (here), I found the following note for onLegendClick:

If the onLegendClick option is not specified, a click on the legend will invoke the function assigned to the onSeriesClick option in Chart. To prevent this behavior, assign at least an empty function to the onLegendClick field.

However, it looks like even though I defined the onLegendClick function, the onSeriesClick still gets called. Please see attached codepen example

What am I doing wrong ? Any ideas ?

Solution

  • According to the documentation you can cancel events by using:

    e.event.cancel = true;

    in your onLegendClick handler