Recharts show tooltip on ALL charts on hover

Question

I'm using recharts/ react to visualize some simple data, and running into a wall. I want to show the line + tooltip on ALL the graphs whenever a user hovers over any of the graphs. Been trying to use state or dispatch but running into a wall.

I've attached code snippets for my chart and dashboard files with the attempt at using dispatcher. I dont't know where in chart.js to actually call showTooltip. The functionality I want is to show the tooltips for all charts whenever a user hovers over any single chart. If one tooltip = active, I want all tooltips=active. Any guidance would be super helpful!

chart.js snippet

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>
  );
}

dashboard.js file snippet

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>
  );
}

Answer 1

I know this was a long time ago, but there is a "syncId" property to put on your chart. All charts with the same syncId will show tooltips at the same time.