Can we add event listeners to "Vega-Lite" specification?

Question

I am new to Vega and Vega-Lite. I am creating a simple bar chart using Vega-Lite but I am not able to add any event listeners e.g. "hover".

I want to hover a bar and change the color of the bar.

Justin

You have not provided any code. SO is not a code-writing service. Look at the end of vega.github.io/vega-lite/docs/embed.html. chart({el:"#vis"}) is a view as is result.view from vg.embed("#vis", embedSpec, function(error, result) {}; You can use any .on('event', fnctn) listener in there. When called, the handler has 2 parameters, the second is the item. You'll need to inspect it to see if you can indeed use it. Full Vega has spec-able event listeners. – Pharyngoscope

You have not provided any code here. I believe you can use Vega-Lite API to implement a hover effect. Please refer to Vega-Lite API reference – Unmoved

Answer 1

If you're using Vega-Embed, it returns a promise with a reference to the view which allows you to use addEventListener - explained in the docs here.

Here is an example:

const width = 600
const color = blue
embed(element, {
    $schema: 'https://vega.github.io/schema/vega-lite/3.0.0-rc6.json',
    data: { 'values': data },
    mark: {
        type: 'line',
        color,
        point: {
            color,
        }
    },
    width,
    height: width / 2,
    encoding: {
        'x': {
            field: 'label',
            type: 'temporal',
        },
        'y': {
            field: 'value',
            type: 'quantitative',
        },
    }
}).then(({spec, view}) => {
    view.addEventListener('mouseover', function (event, item) {
        console.log(item.datum)
    })
})

Ralline

Is it also possible to update a field and re-render the view? I tried item.datum.label = "new label" followed by view.run() without success. – Messapian