How to make custom legends on multiple pie charts amcharts 4?

Question

Imagine that we have a pie chart like the code bellow:

    am4core.ready(function() {
        // Create chart instance
        chartReg[id] = am4core.create(id, am4charts.PieChart);

        // Add data
        chartReg[id].data = data;
        chartReg[id].innerRadius = 60;

        // Add and configure Series
        var pieSeries = chartReg[id].series.push(new am4charts.PieSeries());
        pieSeries.dataFields.value = "value";
        pieSeries.dataFields.category = "key";


        pieSeries.ticks.template.disabled = true;
        pieSeries.alignLabels = false;

        // Create custom legend
        chartReg[id].events.on("ready", function(event) {
            // populate our custom legend when chart renders
            chartReg[id].customLegend = $('#legend');
            pieSeries.dataItems.each(function(row, i) {
            var color = pieSeries.colors.getIndex(i);
            var percent = Math.round(row.values.value.percent * 100) / 100;
            var value = row.value;
            var title = row.category 
            legend.innerHTML += '<div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" onmouseover="hoverSlice(' + i + ');" onmouseout="blurSlice(' + i + ');"><div class="legend-marker" style="background: ' + color + '"></div><div class="legend-title">' + title + '</div><div class="legend-value">' + value + ' | ' + percent + '%</div></div>';
            });
        });         
    });

The custom legends work fine like bellow:

But if we have multiple pie charts that get rendered in the DOM at the same time, the legends don't show up!

❤❤ Thank you for reading my question. ❤❤

Answer 1

I found the answer. Insted of:

legend.innerHTML += '<div>...</div>';

We should use:

$('#legend_'+id).append('<div>...</div>');

that dynamically adds the legends to the related div;)