I ask for help on how to implement an example with a histogram from 'vega-lite' in 'altair'

[Piskuliki0723]

https://vega.github.io/vega/examples/histogram-null-values/
The gist: when you hover the mouse, the selection changes color

I checked the examples gallery and didn't find a similar example:
https://altair-viz.github.io/gallery/index.html

The code doesn't work, how can I fix it so that when I hover the mouse, the color of the selection changes?

chart = alt.Chart(data).mark_bar(color='#666666', fill="blue").encode(
#    x='x:N', 
#    y='y:Q'
).add_params('hover:red')

[ChristopherDavisUCI]

Does something like this give you something like what you want?

I based it on this example, which I found by searching the Altair documentation for the word hover, which is at the very bottom of the Vega spec you linked.

import altair as alt
import pandas as pd

df = pd.DataFrame({
    "x": range(5),
    "y": range(5)
})

hover = alt.selection_point(on='mouseover', nearest=False,
                      fields=['x', 'y'], empty=False)

alt.Chart(df).mark_bar().encode(
    x = "x:N",
    y = "y:Q",
    color = alt.condition(hover, alt.value('red'), alt.value('blue'))
).add_params(hover)

[mattijn]

We could add an Altair-like version of this Vega-Lite one: https://vega.github.io/vega-lite/examples/interactive_bar_select_highlight.html

[Piskuliki0723]

@ChristopherDavisUCI Thank you very much! This works for me.
@mattijn It would be nice to add this example to the examples gallery.

[ChristopherDavisUCI]

Sounds good! @mattijn I'll open an issue with a question about this example you linked.

Update: #3301