Events

You can register handlers for various events. There are pointer events (click, pointermove), animation events (begin, update, complete), and rendering events that are called before rendering the chart elements. Handlers can be registered/unregistered with the on, off method pair.

Note

Currently on method only accept handler's JavaScript expression as string. The event can be accessed via the event object, see the examples below.

We are registering a handler for the click event which will show an alert block with information about the clicked chart element.

Info - How to setup Chart

import pandas as pd
from ipyvizzu import Chart, Data, Config

df = pd.read_csv(
    "https://ipyvizzu.vizzuhq.com/0.17/assets/data/music_data.csv"
)
data = Data()
data.add_df(df)

chart = Chart()

chart.animate(
    data,
    Config(
        {
            "channels": {
                "y": {"set": ["Popularity", "Kinds"]},
                "x": {"set": ["Genres"]},
                "color": {"set": ["Kinds"]},
                "label": {"set": ["Popularity"]},
            },
        }
    ),
)

click_handler = "alert(JSON.stringify(event.target));"

click = chart.on("click", click_handler)

Unregistering the previously registered handler.

chart.off(click)

Here we override the axis label color for Jazz to red and all others to gray.

label_draw_handler = (
    "event.renderingContext.fillStyle ="
    + " (event.target.value === 'Jazz') ? 'red' : 'gray';"
)

label_draw = chart.on("plot-axis-label-draw", label_draw_handler)

Unregistering the previously registered handler.

chart.off(label_draw)

The default behaviour of all events can be blocked by calling the event's preventDefault method. Here we block the drawing of the Vizzu logo in the bottom right corner of the chart.

logo_draw_handler = "event.preventDefault();"

logo_draw = chart.on("logo-draw", logo_draw_handler)

Unregistering the previously registered handler.

chart.off(logo_draw)

You can also add a background image to the chart using the preventDefault method.

bgimage_draw_handler = """
if (!window.bgImage) {
    window.bgImage = new Image();
    /* base64 converted image */
    window.bgImage.src = 'data:image/gif;base64,R0lGODlhAwACAPIAAJLf6q/i7M/r8un0+PT6+/n8/QAAAAAAACH5BAQAAAAALAAAAAADAAIAAAMEWBMkkAA7';
}
event.renderingContext.drawImage(window.bgImage, 0, 0,
    event.detail.rect.size.x, event.detail.rect.size.y);
event.preventDefault();
"""

bgimage_draw = chart.on("background-draw", bgimage_draw_handler)

chart.animate(Config({"title": "Add background image"}))

Note

Place the chart.on call before the chart.animate call from where you want to replace the background image.

Unregistering the previously registered handler.

chart.off(bgimage_draw)