Javascript 鼠标悬停时在所有图表上显示工具提示

我使用recharts/react来可视化一些简单的数据，然后撞到墙上。每当用户将鼠标悬停在任何图形上时，我想在所有图形上显示line+工具提示。试图使用状态或调度，但遇到了问题

为了尝试使用dispatcher，我附上了图表和仪表板文件的代码片段。我不知道在chart.js的什么地方真正调用showTooltip。我想要的功能是每当用户将鼠标悬停在任何单个图表上时，显示所有图表的工具提示。如果一个工具提示=活动，我希望所有工具提示=活动。任何指导都会非常有用

chart.js代码段

export default function Chart(props) {

  const {state, dispatch} = useContext(AppContext);

  const showTooltip = (newValue) => {

    dispatch({ type: 'HOVER', data: newValue,});
  };


  const theme = createMuiTheme({
    palette: {
      primary: {
          main: '#041f35'
      },
      secondary: {
        main: '#5dc5e7'
      }
    }  
  });

  return (
    <React.Fragment>
      <MuiThemeProvider theme={theme}>
      <Title>{props.title}</Title>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          width={500}
          height={300}
          data={data}
          margin={{
            top: 5,
            right: 5,
            left: -35,
            bottom: 5,
          }}
        >
          <XAxis dataKey="time" />
          <YAxis axisLine={false} tickLine={false}/>
          <Tooltip  />
          <CartesianGrid vertical={false} stroke="#d3d3d3"/>
          <Line type="monotone" dataKey="mktplace1" stroke={theme.palette.primary.main} activeDot={{ r: 8 }} />
          <Line type="monotone" dataKey="mktplace2" stroke={theme.palette.secondary.main}  />
        </LineChart>
      </ResponsiveContainer>
    </MuiThemeProvider>
    </React.Fragment>
  );
}

导出默认功能图（道具）{
const{state，dispatch}=useContext（AppContext）；
常量showTooltip=（newValue）=>{
分派（{type:'HOVER'，data:newValue，}）；
};
const theme=createMuiTheme({
调色板：{
主要：{
main:“#041f35”
},
中学：{
main:“#5dc5e7”
}
}  
});
返回(
{props.title}
);
}

dashboard.js文件片段

export const AppContext = React.createContext();

// Set up Initial State
const initialState = {

  active: new Boolean(false),

};

function reducer(state, action) {
  switch (action.type) {
      case 'HOVER':
          return {
              active: new Boolean(true)
          };

      default:
          return initialState;
  }
}

export default function Dashboard() {

  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div className={classes.root}>
      <CssBaseline />
      <main className={classes.content}>
        <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={2}>
            {/* Chart */}
            <Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
              <Paper className={fixedHeightPaper}>
                <AppContext.Provider value={{ state, dispatch }}>
                  <Chart title="Sales by Marketplace"/>
                </AppContext.Provider>
              </Paper>
            </Grid>
            <Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
              <Paper className={fixedHeightPaper}>
              <AppContext.Provider value={{ state, dispatch }}>
                  <Chart title="Sales by Marketplace"/>
                </AppContext.Provider>
              </Paper>
            </Grid>
            <Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
              <Paper className={fixedHeightPaper}>
              <AppContext.Provider value={{ state, dispatch }}>
                  <Chart title="Sales by Marketplace"/>
                </AppContext.Provider>
              </Paper>
            </Grid>
            <Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
              <Paper className={fixedHeightPaper}>
              <AppContext.Provider value={{ state, dispatch }}>
                  <Chart title="Sales by Marketplace"/>
                </AppContext.Provider>
              </Paper>
            </Grid>
          </Grid>
        </Container>
      </main>
    </div>
  );
}

export const AppContext=React.createContext（）；
//设置初始状态
常量初始状态={
活动：新布尔值（假），
};
功能减速机（状态、动作）{
开关（动作类型）{
案例“悬停”：
返回{
活动：新布尔值（真）
};
违约：
返回初始状态；
}
}
导出默认函数仪表板（）{
const[state，dispatch]=useReducer（reducer，initialState）；
返回(
{/*图表*/}