1

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.

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
ghostrider
  • 5,131
  • 14
  • 72
  • 120
  • what are you trying to accomplish by using the click event? from the code, it appears you're trying to get the row and column index from the data table, but the click event does not provide these properties. it only provides the id of the chart element that was clicked. if you use the select event, you can get row and column by using `chartWrapper.getChart().getSelection()` -- and you should be able to assign the select event in the same manner as the ready event. – WhiteHat Feb 07 '22 at 14:30
  • That's some sample code - I've removed that. I need to update my state depending on some clicks on my chart. I'm confused on the types - seems I cannot make it work. – ghostrider Feb 07 '22 at 14:48
  • so looks like you would have to modify the react wrapper to include `"click"` as a valid `GoogleVizEventName` – WhiteHat Feb 07 '22 at 14:58
  • Yes but that shouldn't be the case. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/google.visualization/index.d.ts#L1461 should take any string, but it seems the way I have it thinks that the interface is : https://github.com/rakannimer/react-google-charts/blob/master/src/types.ts#L225 – ghostrider Feb 07 '22 at 15:21
  • the click event used in [this answer](https://stackoverflow.com/a/57557639/5090771) from the last example you shared, uses a regular dom event, not a google click event. – WhiteHat Feb 08 '22 at 13:34
  • Hmm code looks identical to me though - any guidance on what am I overseeing. Thanks a lot for the tips - I'll keep investigating. – ghostrider Feb 08 '22 at 14:53
  • in the answer I linked, the click events is assigned as --> `chart.container.addEventListener("click", ...` -- this is a regular dom event on the chart's `
    ` element -- the google click event is normally assigned as --> `google.visualization.events.addListener(chart, "click", ...`
     – WhiteHat Feb 08 '22 at 15:05
  • point being, the regular dom event should work in the code you have, just not sure if it will work for what you need... – WhiteHat Feb 08 '22 at 15:06
  • Interesting, I'll check again - `chart.container` doesn't work for me though as I still get that `container is not a property of chart`. – ghostrider Feb 10 '22 at 08:53
  • 1
    yes, I wondered about the container, never seen that, but the following should work --> `chartWrapper.getChart().getContainer()` – WhiteHat Feb 10 '22 at 14:36
  • Btw this worked, so if you want to make it a proper asnwer I can confirm - or I can post my own answer to the above. – ghostrider Feb 14 '22 at 16:05

1 Answers1

0

The ts library is facing a type issue: https://github.com/rakannimer/react-google-charts/issues/545

  {
    eventName: "ready",
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();
      // the ts library is facing a type issue
      // https://github.com/rakannimer/react-google-charts/issues/545
      (google.visualization.events as any).addListener(
        chart,
        "onmouseover",
        (e: Event) => {
          console.log("onmouseover", e);
          drawCurrentTime(ref, currentTimeLabel)
        }
      );
    },
  };
RooksStrife
  • 1,647
  • 3
  • 22
  • 54