react-vega - get data on click event (add event listener for click events)

Question

I use 'react-vega' and 'react-rooltip'. It works fine. It gets correct data and displays it on the tooltip. But how I can get the data on click event? I tried to add signals to the spec, but they didn't work.

Here is the demo with simple vega chart: https://codesandbox.io/s/w2lq37v7ll

What I need to modify to add an event listener for click event.

What I want is to get the same data that tooltip has when user clicks on any object on vega chart.

Answer 1

@codex mentioned that you can use ViewAPI.addEventListener, but it's not really clear how to include that in the React component. I find it much simpler than using signals in the spec.

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

In this case the click handler is applied to the whole view, and you need to check the item to see what's inside.

Answer 2

Below code logs data of country shape that was clicked, to the browser console.

   "signals": [
    {
      "name": "signal_tooltip",
      "on": [
        {"events": "shape:click", "update": "warn(datum)"}
      ]
    }
  ],

To listen to events all mark items(symbol type, shape type in your code) on the chart, change {"events": "shape:click", ... to "events": "*:click", ...}

Note: You can also use, View API addEventListener which has item as second argument. item.datum will contain the clicked item's data.

view.addEventListener('click', function(event, item) {
  console.log(item.datum);
});

Full code reference (using signals):

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "autosize": "pad",
  "padding": 5,
  "width": 800,
  "height": 500,
  "style": "cell",
  "signals": [
    {
      "name": "signal_tooltip",
      "on": [
        {"events": "shape:click", "update": "warn(datum)"}
      ]
    }
  ],
  "data": [
    {
      "name": "world",
      "url": "https://vega.github.io/editor/data/world-110m.json",
      "format": {
        "type": "topojson",
        "feature": "countries"
      }
    },
    {
      "name": "source_0",
      "values": [
        {
          "lon": -63.616672,
          "lat": -38.416097,
          "some_data01": 1000,
          "some_data02": 200,
          "code": "AR",
          "country": "Argentina"
        },
        {
          "lon": 133.775136,
          "lat": -25.274398,
          "some_data01": 1000,
          "some_data02": 200,
          "code": "AU",
          "country": "Australia"
        },
        {
          "lon": -95.712891,
          "lat": 37.09024,
          "some_data01": 1000,
          "some_data02": 200,
          "code": "US",
          "country": "UnitedStates"
        },
        {
          "lon": 78.96288,
          "lat": 20.593684,
          "some_data01": 1000,
          "some_data02": 200,
          "code": "IN",
          "country": "India"
        },
        {
          "lon": -106.346771,
          "lat": 56.130366,
          "some_data01": 50000,
          "some_data02": 2000,
          "code": "CA",
          "country": "Canada"
        },
        {
          "lon": 138.252924,
          "lat": 36.204824,
          "some_data01": 60000,
          "some_data02": 1000,
          "code": "JP",
          "country": "Japan"
        },
        {
          "lon": -3.435973,
          "lat": 55.378051,
          "some_data01": 60000,
          "some_data02": 1000,
          "code": "UK",
          "country": "United Kingdom"
        }
      ]
    },
    {
      "name": "data_1",
      "source": "source_0",
      "transform": [
        {
          "type": "geojson",
          "fields": ["lon", "lat"],
          "signal": "layer_1_layer_0_geojson_0"
        },
        {
          "type": "geopoint",
          "projection": "projection",
          "fields": ["lon", "lat"],
          "as": ["layer_1_layer_0_x", "layer_1_layer_0_y"]
        }
      ]
    },
    {
      "name": "data_2",
      "source": "source_0",
      "transform": [
        {
          "type": "geojson",
          "fields": ["lon", "lat"],
          "signal": "layer_1_layer_1_geojson_0"
        },
        {
          "type": "geopoint",
          "projection": "projection",
          "fields": ["lon", "lat"],
          "as": ["layer_1_layer_1_x", "layer_1_layer_1_y"]
        }
      ]
    }
  ],
  "projections": [
    {
      "name": "projection",
      "size": {
        "signal": "[width, height]"
      },
      "fit": {
        "signal": "[data('world'), layer_1_layer_0_geojson_0, layer_1_layer_1_geojson_0]"
      },
      "type": "mercator"
    }
  ],
  "marks": [
    {
      "name": "layer_0_marks",
      "type": "shape",
      "style": ["geoshape"],
      "from": {
        "data": "world"
      },
      "encode": {
        "update": {
          "fill": {
            "value": "lightgray"
          },
          "stroke": {
            "value": "white"
          }
        }
      },
      "transform": [
        {
          "type": "geoshape",
          "projection": "projection"
        }
      ]
    },
    {
      "name": "layer_1_layer_0_marks",
      "type": "symbol",
      "style": ["circle"],
      "from": {
        "data": "data_1"
      },
      "encode": {
        "update": {
          "opacity": {
            "value": 0.7
          },
          "fill": {
            "value": "orange"
          },
          "tooltip": {
            "signal": "{\"country\": ''+datum[\"country\"], \"some_data01\": format(datum[\"some_data01\"], \"\"), \"some_data02\": format(datum[\"some_data02\"], \"\")}"
          },
          "x": {
            "field": "layer_1_layer_0_x"
          },
          "y": {
            "field": "layer_1_layer_0_y"
          },
          "shape": {
            "value": "circle"
          }
        }
      }
    },
    {
      "name": "layer_1_layer_1_marks",
      "type": "text",
      "style": ["text"],
      "from": {
        "data": "data_2"
      },
      "encode": {
        "update": {
          "dy": {
            "value": -6
          },
          "fill": {
            "value": "black"
          },
          "tooltip": {
            "signal": "{\"country\": ''+datum[\"country\"], \"some_data01\": format(datum[\"some_data01\"], \"\"), \"some_data02\": format(datum[\"some_data02\"], \"\")}"
          },
          "x": {
            "field": "layer_1_layer_1_x"
          },
          "y": {
            "field": "layer_1_layer_1_y"
          },
          "text": {
            "signal": "''+datum[\"country\"]"
          },
          "align": {
            "value": "center"
          }
        }
      }
    }
  ],
  "config": {
    "axisY": {
      "minExtent": 30
    }
  }
}