'Using chartEvents on google-react-charts and typescript
I am having a react typescript project in which i am using react-google-charts
. Based on reading a similar discussion here which works for JS, I am trying the same on Typescript.
I am having the below chart :
<Chart
chartType="ColumnChart"
width="80%"
height="80%"
data={data}
options={options}
chartEvents={[
{
eventName: "ready",
callback: ({ chartWrapper, google }) => {
const chart = chartWrapper.getChart();
google.visualization.events.addListener(chart, "click", (e) => {
console.log("CLICK");
});
}
}
]}
/>
Error I am getting is :
Argument of type '{ removeAction: (actionID: string) => void; getSelection: () => { row?: any; column?: any; }[]; setAction: (ChartAction: GoogleChartAction) => void; getImageURI: () => void; clearChart: () => void; }' is not assignable to parameter of type 'GoogleChartWrapper | GoogleChartControl | GoogleChartEditor'.
Type '{ removeAction: (actionID: string) => void; getSelection: () => { row?: any; column?: any; }[]; setAction: (ChartAction: GoogleChartAction) => void; getImageURI: () => void; clearChart: () => void; }' is missing the following properties from type 'GoogleChartWrapper': draw, toJSON, clone,
on the google.visualization.events.addListener(chart, "click", (e) => {
line.
EDIT` For a simpler version of the error you can check example here
I was expecting that the addListener
called - will be the one under google namespace
to be called. And other examples I've found on SO suggest that this should working, at least for React + JS. For example code here.
But I cannot work the types correctly.
chartEvents
are an array of ReactGoogleChartEvent. Which means that the callback is defined here. So google, is of type GoogleViz
, and there is no click
in the GoogleVizEvents and GoogleVizEventName.
I don't know how all those examples that are posted are working.
What am I missing?
Edit Another example on the source repo of react-google-charts
:
Doesn't work for me still.
EDIT 2
In essence, the issue is that the getChart()
returns this. I don't see how this can be used to create a listener for other properties like onmouseover, click
etc as the above discussions are getting or solutions likethis one.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|