CODEWITHSUNDEEP
javascriptreactjsmouseeventvegavega-lite
qwert
qwert

Reputation: 331

Get clicked mark data using react-vega and vega-lite

I have a vega-lite chart and would like to add an event listener to get the data in React, but can't seem to figure this out. Specifically I'm trying to display a table below the vega chart that depends on some attributes of the mark that has been clicked.

Here's the beginning of the spec:

const spec = {
    width: 'container',
    height: 500,
    signals: [
        {
            name: 'click',
            value: 0,
            on: [{events: '*:mousedown', update: 'datum'}]
        }
    ],
    layer: [
        {
            mark: {type: 'point', filled: true, tooltip: {content: 'data'}},
....

And here is my latest attempt at getting the clicked point (based on https://github.com/vega/react-vega/tree/master/packages/react-vega#approach1-create-class-from-spec-then-get-a-react-class-to-use):

const handleClick = (...args) => {
    console.log(args);
}
const signalListeners = { click: handleClick };
const vegaChart = <VegaLite spec={spec} data={data} signalListeners={signalListeners}/>;

However I'm getting Cannot add invalid signal listener. Error: Unrecognized signal name: "click" even though I have the click signal defined. Any help would be appreciated; I can't seem to find anything like this online.

Upvotes: 2

Views: 1907

Answers (4)

Rumyana Ruseva
Rumyana Ruseva

Reputation: 51

In this question there is an example of how to make the signals work: react-vega - get data on click event (add event listener for click events)

And here is the easier way directly in your react-vega component, without signals in the spec:

const vegaChart = (
  <VegaLite
    spec={spec}
    data={data}
    onNewView={(view) => {
      view.addEventListener("click", (_e, item) => console.log(item));
    }}
  />
);

Upvotes: 0

didaskein
didaskein

Reputation: 41

In React I need to set :

const handleHover = (...args: any[]) => {
    console.log(args)   
}

And in .eslintrc.json:

"rules": {
    "@typescript-eslint/no-explicit-any": "off"
},

Upvotes: 0

btk
btk

Reputation: 3235

Looks like vega-lite doesn't support signals, so the workaround is to add the signal to the compiled spec.

This question provides a good example: What's the proper way to implement a custom click handler in vega-lite

Upvotes: 0

qwert
qwert

Reputation: 331

Switch to vega by compiling my vega-lite spec into vega spec and then adding the signals block worked.

Upvotes: 1

Related Questions