google.visualization.events.addListener is not working in my React App

[prabhakar1994]

I am using this Lib in my react project to display chart and add click/select events and perform some actions on the UI. I have installed

@google-web-components/google-chart": "5.0.3 (package.json) in my project and imported import '@google-web-components/google-chart' in my react component where i need to display the charts.

My render method in react have the below code

<google-chart
            class="selection-chart"
            id="myChart"
            type='pie'
            options='{"title": "Distribution of days in 2001Q1"}'
            cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
            rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'
            selection='[{"row": 1}]'
            >
          </google-chart>

When I click on the any pie piece I should get an alert of the details of it value in the alert dialog box. Which is not working.

My index.html have the code

document.addEventListener('DOMContentLoaded', function() 
    {
      setTimeout(() => {
      var pieChart = new google.visualization.PieChart(document.getElementById('myChart'));
      google.visualization.events.addListener(pieChart, 'select', selectHandler);
      google.visualization.events.addListener(pieChart, 'select', function() {
      console.log("Slice clicked chartElement !", pieChart.getSelection());
      });
    }, 4000);
    });

    function selectHandler(e) 
    {
        alert('The user selected', e);
    }

Please correct me if I am missing something.

[rslawik]

Hey @prabhakar1994, I recommend to interact only with the <google-chart> web component for selection updates like in this example using the google-chart-select event.

Using the Google Charts API directly (like in your index.html) is theoretically possible, but not needed to handle selection events.