[Bug]: Can't seem to get MutationObserver to work inside an event, but it works with the underlying library

[darewreck54]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

This https://stackoverflow.com/questions/51637699/google-chart-gannt-avoid-tooltip/51639719#51639719 talks about how you can hide the tool tip when hovering over a task on the gnatt chart. This uses the non-react google chart library.

When i tried to apply the same logic with the react google chart library, it didn't work. Since this library is just a wrapper, it should work if the core code works

Attempt 1:

• adding observer, but the observer never gets triggered

const chartEvents: ReactGoogleChartEvent[] = [
    {
      eventName: "ready",
      callback: ({ chartWrapper }) => {
        const containerId =  chartWrapper.getContainerId()
        var container = document.getElementById(containerId) as HTMLElement;
        var observer = new MutationObserver(function (nodes) {
          Array.prototype.forEach.call(nodes, function(node) {
            if (node.addedNodes.length > 0) {
              Array.prototype.forEach.call(node.addedNodes, function(addedNode) {
                if ((addedNode.tagName === 'rect') && (addedNode.getAttribute('fill') === 'white')) {
                  addedNode.setAttribute('fill', 'transparent');
                  addedNode.setAttribute('stroke', 'transparent');
                  Array.prototype.forEach.call(addedNode.parentNode.getElementsByTagName('text'), function(label) {
                    label.setAttribute('fill', 'transparent');
                  });
                }
              });
            }
          });
        });
        observer.observe(container, {
          childList: true,
          subtree: true
        });
      },
    },
  ];

 ...
 <Chart
          chartType="Gantt"
          data={data}
          width="100%"
          height={rows2.length * 43}
          chartEvents={chartEvents}
          options={options}

        />

Attempt 2:

Didn't know if i was doing the syntax correctly in defining the event so tried this way as well. The google.visualization.events never gets triggered

{
      eventName: "ready",
      callback: ({ chartWrapper, google }) => {
        const containerId =  chartWrapper.getContainerId()
        var container = document.getElementById(containerId) as HTMLElement;
        google.visualization.events.addListener(chartWrapper, `ready`, function() {
          debugger;
          var observer = new MutationObserver(function (nodes) {
            Array.prototype.forEach.call(nodes, function(node) {
              if (node.addedNodes.length > 0) {
                Array.prototype.forEach.call(node.addedNodes, function(addedNode) {
                  if ((addedNode.tagName === 'rect') && (addedNode.getAttribute('fill') === 'white')) {
                    addedNode.setAttribute('fill', 'transparent');
                    addedNode.setAttribute('stroke', 'transparent');
                    Array.prototype.forEach.call(addedNode.parentNode.getElementsByTagName('text'), function(label) {
                      label.setAttribute('fill', 'transparent');
                    });
                  }
                });
              }
            });
          });
          observer.observe(container, {
            childList: true,
            subtree: true
          });
        })
      },
    },

Reproduction

https://codesandbox.io/s/headless-rgb-1x9s82?file=/App.tsx:1893-1909

react-google-charts version

v4.0.0

Possible solution

No response