V5: overwrite legend click event

[flaming-cl]

Hey for V5, do you know how to replace each legend label's click event with our own user event?

[martynasma]

You can disable built-in toggle events by setting clickTarget: "none": https://www.amcharts.com/docs/v5/concepts/legend/#disabling-toggling

Then you can just add your own click events:

leged.itemContainers.template.events.on("click", function(ev) {
  console.log(ev.target);
});

[flaming-cl]

Thanks! clickTarget: "none" also works if I set it with JSON config for legend.settings, right?

[martynasma]

Thanks! clickTarget: "none" also works if I set it with JSON config for legend.settings, right?

Yes.

[flaming-cl]

doesn't seem to work while setting up legend.itemContainers.template.events

[martynasma]

This is because by the time you add the event, item containers are already created.

You may need to add to actual items:

legend.itemContainers.each(function(container) {
  container.events.on("click", .....);
});

[flaming-cl]

Thanks the above solution works great!

One small question on clickTarget: "none": this also disables the hovering (curser: pointer 👆) effect on legend.

Do you know how to show the cursor while disable the original click event?

[martynasma]

itemContainers: {
  properties: {
    template: {
      settings: {
        x: { type: 'Percent', value: 0 },
        centerX: { type: 'Percent', value: 10 },
        width: { type: 'Percent', value: 98 },
        height: 50,
        cursorOverStyle: "pointer",
        interactive: true
      }
    }
  }
},