How to route to a page on click event in apex charts? - reactjs

Question

A beginner in react... I am able to reach a function post-click event of a bar but unable to route to a link or page.
I may have other defined routes to which I want to go, like a page consisting of a table, listing all the sales and it automatically gets filtered. How am I supposed to do that? Please guide me through. I have searched for this a lot and finally was able to reach a function but now I am stuck.
class SalesWidget2 extends Component {
routeChange(index){
console.log('I am here');
// let history = useHistory();
// history.push('google.com');
}
constructor(props) {
super(props);
this.state = {
colors:['#FEB019'],
series: [{
name: 'Sales ',
type: 'column',
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6],
}],
options: {
chart: {
type: 'bar',
height: 350,
fontFamily: 'Roboto, sans-serif',
fontSize: '14px',
events:{
click: (event, chartContext, config) =>{
this.routeChange(config.dataPointIndex);
}
},
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: false,
}
},
dataLabels: {
enabled: false
},
title: {
text: 'My Store Performance',
align: 'left',
offsetX: 50,
fontSize: '14px',
},
xaxis: {
title: {
text: 'Time',
style: {
fontSize: '14px',
},
},
categories: ['June 2021', 'July 2021','August 2021', 'September 2021', 'October 2021','November 2021','December 2021', 'January 2022'],
},
yaxis:{
title: {
text: 'Sales',
style: {
fontSize: '14px',
}
},
labels:{
formatter: function(val) {
return val.toFixed(1);
}
}
},
tooltip: {
x:{
title:{
text: 'Sales',
}
},
y: {
formatter: function(val) {
return "$" + val.toFixed(0) + " million";
}
}
},
fill:{
colors:['#FEB019'],
},
stroke:{
colors:['#FEB019'],
},
legend: {
horizontalAlign: 'left',
offsetX: 40,
fontSize: '14px',
},
responsive: [{
breakpoint: 1000,
options: {
plotOptions: {
bar: {
horizontal:true,
vertical: false,
}
},
legend:{
position: "bottom"
},
yaxis:{
labels:{
formatter: function(val) {
return val.toFixed(0);
}
}
},
xaxis:{
labels:{
formatter: function(val) {
return val.toFixed(1);
}
}
},
},
}],
},
};
}
render() {
return(
<Chart options={this.state.options} series={this.state.series} type="bar" height="350" />
)
}}