Skip to content

Events

You can register handlers for various events. There are mouse events (click, mouseon), 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.

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

Info - How to setup Vizzu

In HTML, create a placeholder element that will contain the rendered chart.

<html>
 <body>
  <div id="myVizzu">
  </div>
 </body>
</html>

In JavaScript, initialize and configure the chart:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.7/dist/vizzu.min.js'
import data from 'https://lib.vizzuhq.com/0.7/assets/data/music_data.js'

let chart = new Vizzu('myVizzu')

chart.initializing

chart.animate({
    data: data,
    config: {
        channels: {
            y: {
                set: ['Popularity', 'Kinds']
            },
            x: {
                set: ['Genres']
            },
            label: {
                attach: ['Popularity']
            },
        },
        color: {
            attach: ['Kinds']
        },
    }
})
function clickHandler(event) {
    alert(JSON.stringify(event.data));
}

chart.on('click', clickHandler);

Unregistering the previously registered handler.

chart.off('click', clickHandler);

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

function labelDrawHandler(event) {
    event.renderingContext.fillStyle =
        (event.data.text === 'Jazz') ? 'red' : 'gray';
}

chart.on('plot-axis-label-draw', labelDrawHandler);

Unregistering the previously registered handler.

chart.off('plot-axis-label-draw', labelDrawHandler);

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.

function logoDrawHandler(event) {
    event.preventDefault();
}

chart.on('logo-draw', logoDrawHandler);

Unregistering the previously registered handler.

chart.off('logo-draw', logoDrawHandler);