更改选项卡时，Highcharts-legend-item.last（）消失

Question

I have a "tab container" set up on my page with three tabs, each containing a different highcharts pie chart. They are rendered depending on the active tab. For each one of them I put a total of 100% column at the end of the legend, with this code;

chart: {
    type:'pie',
    renderTo: 'ctl00_ContentPlaceHolder1_Overview1_AssetXRayChart',
    events: {
        load: function(event) {
            $('.highcharts-legend-item').last().append('<br/><div style="width: 220px; margin-left: 190px;">_____</div><br/><div style="width:220px"><span style="float:right"><b>100%</b></span> </div>');
        }
    }
}

On the initial render everything looks great, but if I click on any of the subsequent tabs to display those pie charts, and then return to a different tab to view the chart i've already seen that total column is gone, except for the third tab, which is the final rendered chart. I believe it is because the third chart rendered is actually the official "last" legend item element and that is why it stays, but since all of these are rendered in their own respective shouldn't that allow for the total row to stay there? is it because i use that exact same line of code for each one of them with no unique id's in the div's or span's? any help is appreciated. Thank you very much, NickG

Answer 1

Change for each chart path from:

 $('.highcharts-legend-item')...

to:

 $('#tl00_ContentPlaceHolder1_Overview1_AssetXRayChart .highcharts-legend-item')...

Where #tl00_ContentPlaceHolder1_Overview1_AssetXRayChart is different for each chart ( as ID's for chart containers)