Empty HTML tooltips cause error "DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

lindapaiste commented 1 year ago

Bug description

I came across an issue where HTML tooltips were causing my entire app to crash. After a bunch of playing around, I figured out the circumstances which produce the DOMException. You might consider this to be "user error" but I thought it was worth reporting.

Demo: https://codepen.io/linda-paiste/pen/abXNYvz?editors=0010

Relevant code:

const tooltip = xAxis.getTooltip();

tooltip.adapters.add("labelHTML", function (text, target) {
  const lines = chart.series.values.map((series) => {
    const tooltipDataItem = series.get("tooltipDataItem");
    const value = tooltipDataItem?.get("valueY");
    if (!value) return "";
    const color = series.get("stroke").toString();
    const name = series.get("name");
    return `<div style="display: flex;justify-content:space-between;">
    <div style="width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:white;">${name}:</div>
    <span style="color:${color};text-align:right">${value}</span>
    </div>`;
  });
  return lines
    .filter(Boolean) // Removing this line eliminates the bug
    .join("\n");
});

The issue here is that the adapter sometimes returns an empty string '' (if all series have 0 values). When that happens, the chart shows the default x-axis tooltip instead of the custom HTML content. And then it will crash on the next tooltip.

martynasma commented 1 year ago

Thanks!

This issue was fixed in dev version, and will be released soon.

We'll notify you here when that happens.

martynasma commented 1 year ago

Fixed in 5.5.3.

[5.5.3] - 2023-11-01

Added

New indicator "Stochastic Momentum Index" added.
All StockChart indicators with OverBought/Oversold ranges (Commodity Channel Index, Relative Strength Index, Stochastic Momentum Index, Stochastic Oscilator and Williams R) have now middle line between oversold/overbought. Also a draggable grip added to oversold/overbought ranges which allows user to change values by dragging these grips.
New StockChart toolbar control: DropdownControl. Can use to add any content to be displayed in a dropdown when clicked. More info.

Changed

Changed defaults on a StockPanel: wheelY: "zoomX", panX: true, panY: true. Previously, those were hardcoded in ChartIndicator, which prevented a possibility to change them via a theme.
Changed defaults on an AxisRendererY: pan:"zoom". This adds zoom possibility for all Y axes of a StockChart (previously indicator Y axes where not zoomable).
IndicatorControl now extends DropdownListControl for consistency.
IndicatorControl has now scrollable: true set by default.
Tweaked number formats for indicator legend items.
Default ordering of indicators in IndicatorControl changed.

Fixed

Returning empty string from labelHTML adapter on a Tooltip in some cases could result to an error.
Timezone formatting with "z" codes in DateFormatter was not always correct.
XYChart could flicker on Safari browser in some rare responsive CSS setups.

Full change log.

Download options.

Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.

amcharts / amcharts5