Skip to content

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.16/dist/vizzu.min.js'
import data from 'https://lib.vizzuhq.com/0.16/assets/data/music_data.js'

let chart = new Vizzu('myVizzu')

await chart.initializing

chart.animate({
    data
})
chart.animate({
    config: {
        channels: {
            y: {
                set: ['Popularity']
            },
            x: {
                set: ['Genres']
            }
        }
    }
})

We will reference the data series by names for clarity throughout the tutorial. However, you can also use data series descriptor objects as well. That way you can define aggregators to the series. For more information about aggregators, see the Aggregating data chapter. The previous example can be rewritten using data series descriptor objects as follows:

chart.animate({
    config: {
        channels: {
            y: {
                set: [
                    {
                        name: 'Popularity'
                    }
                ]
            },
            x: {
                set: [
                    {
                        name: '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 property.

chart.animate({
    config: {
        title: 'My first chart'
    }
})

Subtitle and caption textual element options are available for your charts.

chart.animate({
    config: {
        subtitle: 'with fancy animations',
        caption: 'Source: Vizzu tutorial'
    }
})

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.