Welcome to the JavaScript feedback portal. We’re happy you’re here! If you have feedback on how to improve the JavaScript, we’d love to hear it!>
Thanks for joining our community and helping improve Syncfusion products!
If appendTo is passed an element that doesn't have an id property set then the heatmap doesn't allocate one, which means that e.g. the svg object just gets given an id of "_svg". This then causes problems if you render two heatmaps on the same page as the svg objects both have the same id and the first heatmap's svg object vanishes.
I have modified one of your heatmap examples on Stackblitz to demonstrate the issue - the example renders two charts with a 2 second delay before the second is rendered. Each chart is rendered into a different div and in both cases they're divs with no id set. I've given the two parent divs different coloured borders and the charts different titles to make it visually clearer. As you'll see the svg for the first chart vanishes when the second chart is rendered. The example is here.
I can see that the Chart and AccumulationChart controls, by contrast, both will check if the target element has an id and will allocate one a unique one if not (one does it in preRender the other in initPrivateVariable) so I suspect HeatMap just needs similar code. Although I note that the code for allocating the id for AccumulationChart does so in a way which is not safe (if e.g. 3 charts were created and the first was destroyed then another created you would have an id collision because it just uses the count of charts found) - I'll report that as a separate bug. Chart doesn't have that issue as it iterates until it finds an id not currently in use, so that would be the technique both HeatMap and AccumulationChart need to use.