I want to have a graph where, when I click on the graph, a modal shows up. However, I'm struggling to get the graph to recognize the onclick listener.

Any ways on making this work?

in my graphview:

class GraphView extends React.Component {
    render() {
        return (
            <ResponsiveContainer width="100%" height={180} onClick={this.props.onClick}>
                <LineChart data={mydata} width={600} height={400} margin={{ top: 5, bottom: 5, left:-30, right: 0}}>
                <XAxis dataKey='time'/>
                <YAxis>
                    {/* <Label angle={-90} value='stuff' position='insideLeft'style={{textAnchor: 'middle'}} dy={0} dx={0}/> */}
                </YAxis>
                <Legend />
                <Line type="monotone" dataKey="visitors" stroke="#4285f4" activeDot={{r: 5}}/>
                    <Line type="monotone" dataKey="visitors2" stroke="#001529" activeDot={{r: 5}}/>
                <Tooltip/>
                </LineChart>
            </ResponsiveContainer>
        );
    }
}

in my function component:

function showModal  () {
        console.log("aaaaaaaaaa");
}

function alarmLog() {
    const modal = <div>
        <GraphView onClick={() => showModal()}/>