Axes, title, tooltip
To build a chart with Vizzu
, you have to add data series to the channels.
Channels will be explained more in-depth later, but for now, think of channels
as different elements of the chart we can bind data to. The simplest and most
often used channels are the x and y-axes.
The first step is to create a simple column chart, adding one of the dimensions
from the data set we added in the previous chapter (Genres
) to the x-axis and
the measure (Popularity
) to the y-axis using the set property.
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
})
chart.animate({
config: {
channels: {
y: {
set: ['Popularity']
},
x: {
set: ['Genres']
}
}
}
})
In the next step, the chart is rearranged by putting both series on the y-axis
using once again the set property, resulting in a single column chart. Vizzu
automatically animates between the initial state and this one.
chart.animate({
config: {
channels: {
x: {
set: null
},
y: {
set: ['Genres', 'Popularity']
}
}
}
})
Instead of set, you can use attach and detach to add or remove series to/from the channels.
chart.animate({
config: {
channels: {
y: {
detach: ['Popularity']
},
x: {
attach: ['Popularity']
}
}
}
})
Using attach & detach makes it easier to build your animated charts step-by-step, however you either have to keep in mind what you had on which channel in the previous step or add the following code to access the actual configuration of the chart.
console.log(chart.config);
Setting the chart title with the title command.
chart.animate({
title: 'My first chart'
})
Switching on the tooltips that appear on the chart elements when the user hovers
over them with their mouse by adding the ('tooltip'
, true
) parameters to the
chart.feature
method.
chart.feature('tooltip', true)
Note
Calls to this method before the library initialization completed will fail.