How to write a custom script in ReactJS?-CodePudding

Lets say I already build a component with google chart in ReactJS, and I want to make the Legend to show/hide data by using a js script shown here.

How and where should I put this piece of code to react with my chart?

My component look something like this: PlayerCountStat

//Skipping all the imports and useEffect code...
  return (
    <Chart
      chartType="LineChart"
      width="100%"
      height="400px"
      data={dateData}
      options={options}
      chartPackages={["corechart", "controls"]}
      controls={[
        {
          controlType: "ChartRangeFilter",
          options: {
            filterColumnIndex: 0,
            ui: {
              chartType: "LineChart",
              chartOptions: {
                chartArea: { width: "90%", height: "50%" },
                hAxis: { baselineColor: "none" },
              },
            },
          },
          controlPosition: "bottom",
          controlWrapperParams: {
            state: {
              range: {
                start: {startFilterDate},
                end: {endFilterDate}
              },
            },
          },
        },
      ]}
    />
  );
}

export default PlayerCountStat

And the Routing is like this

function App() {
  return (
    <BrowserRouter>
        <Route path="/PlayerCountStat">
          <Navbar/>
          <Page content={PlayerCountStat}/>
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

CodePudding user response：

Assuming you're using React Google Charts, there is a prop called chartEvents

<Chart 
   chartType="LineChart"
   width="100%"
   height="400px"
   data={data}
   options={options}
   chartEvents={[
     {
       eventName: 'select' // Change this to applicable event,
       callback: ({ chartWrapper }) => {
          // Add your logic
       }
     }
   ]}
/>

I found this codepen that might be what you're looking to accomplish: https://codesandbox.io/s/d9drj?file=/index.js