How to catch the click event on the PolarChart Extjs chart legend

How can I activate some function or event when clicking on the PolarChart graph legend in Extjs.

Chart

chart code:

Ext.define('SIEM.agents.ChartPie',{
    extend: 'Ext.chart.PolarChart',
    alias: 'widget.siem-chart-pie',
    requires: [
        'Ext.chart.series.Pie',
        'Ext.chart.interactions.Rotate',
        'Ext.chart.interactions.ItemHighlight'
    ],
    interactions: ['rotate', 'itemhighlight'],
    height: 175,
    legend: {
        docked: 'right',
    },
    store: {
        fields: ['name', 'value']
    },
    series: {
        type: 'pie',
        // highlight: true,
        angleField: 'value',
        radiusField: 'name',
        donut: 70,
        label: {
            field: 'name',
            display: 'inside',
            contrast: true,
            font: "12px Arial",
            color: '#fff',
        },
        tooltip: {
            trackMouse: true,
            width: 120,
            height: 40,
            renderer: function (toolTip, record, ctx) {
                toolTip.setHtml(record.get('name') + ': ' + record.get('value'));
            }
          }
    },
})

what I tried and didn't work:

Ext.define('SIEM.agents.ChartPie',{
    extend: 'Ext.chart.PolarChart',
    alias: 'widget.siem-chart-pie',

    // Restante do código do gráfico...

    listeners: {
        afterrender: 'onChartRender',

        // o que a documentação fala
        //click: {
        //    element: 'el',
        //    fn: function(){ console.log('click el'); }
        //},
    },
    onChartRender: function() {
        var me = this;
        me.getSeries()[0].getLegendStore().on('itemclick', function(legend, item) {
            console.log('Clicou na legenda:', item.get('name'));
        });
    }
});

Searching here on stack overflow I found this, but it doesn't work either

legend: {
    docked: "bottom",
    listeners: {
        itemclick: "onItemClick",
    }
},

These are the ways I tried, if anyone can help me, I would be grateful in advance.

It can be done!

Just set legend type to 'dom'. Otherwise Legend is drawn in canvas and it would be a bit harder to check mouse event XY to meet canvas legend box coordinates;

Documentation say: The DOM based legend is styled via CSS rules. not as canvas.

Hereis code and fiddle (works in 6.2, 7.0, 7.7):

      legend: {
            docked: 'right',
            type: 'dom', /* <-- here is the clue */
            listeners: {
                /* WORKING LEGEND EVENTS */
                selectionchange: function(me, selected) {
                    alert("selectionchange");
                },
                select: function( me, record, index, eOpts ) {
                    alert("select");
                },
                activate: function( me ) {
                    alert("activate");
                },
                show: function( me ) {
                    alert("show");
                },