Using setSelection in react-google-charts

Question

I have a problem with setSelection method.

I am able to use getSelection, for instance in chartEvents:

chartEvents={
 [
  {
  eventName: 'select',
  callback: ({ chartWrapper }) => {
    const chart = chartWrapper.getChart()
    const selection = chart.getSelection()
...
  }
 ]
}

But I did not find a way to set chart selection.

I need to sync 2 charts - when user selects data point in one chart, I need same point selected in second chart.

Does anybody have solution for this?

I have tried to get original google chart object, but cannot get it working.

<Chart
  onLoad={(chart: GoogleViz) => {
    setChart(chart)
  }}
....

I use onLoad callback, but even in this chart: GoogleViz, there does not seem to be setSelection method anywhere.

Yannic Hamann · Answer 1 · 2023-07-14T17:33:53.650

react-google-charts is not officially maintained by google. That was unexpected for me too. While skimming through its source code I am considering to ditch it. Anyways something similar to this should work:

const data = [
  ['From', 'To', 'Weight'],
  ['A', 'X', 5],
  ['A', 'Y', 7],
  ['A', 'Z', 6],
  ['B', 'X', 2],
  ['B', 'Y', 9],
];

const options = {
  sankey: {
    node: {
      interactivity: true,
    },
  },
};

const ChartsPage = () => {
  const [sankey, setSankey] = useState<any>(null);

  useEffect(() => {
    setTimeout(() => { // side effect within useEffect is bad this doesn't get cleaned up on comonent unmount, just for demo purposes
      if (sankey != null) {
        sankey.getChart().setSelection(null);  // setting selection to null works this needs the actual google chart format and not the wrapper format
        console.log(sankey.getChart().getSelection());
        sankey.draw();
      }
    }, 5000); // reset selection after x seconds
  }, [sankey]);

  return (
        <Chart
          chartType="Sankey"
          data={data}
          options={options}
          chartEvents={[
            {
              eventName: 'ready',
              callback: ({ chartWrapper}) => {
                setSankey(chartWrapper);                
              },
            },
          ]}
        />
  );
};
export default ChartsPage;

Using setSelection in react-google-charts

1 Answers1