Skip to content

Channels & legend

Besides the x-axis and the y-axis, there are five more channels in Vizzu you can use to visualize your data. Similarly to the axes you can put any number of dimensions and/or one measure to a channel. In the following example the four most commonly used channels are shown. The fifth, noop channel is introduced later in the Without coordinates & noop channel chapter.

Data on the label channel will be written on the markers on the chart. Vizzu automatically determines the best way to position these labels, but you can set them differently with the style object introduced in the Color palette & fonts chapter.

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

let chart = new Vizzu('myVizzu')

await chart.initializing

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

chart.animate({
    config: {
        channels: {
            label: {
                attach: ['Popularity']
            }
        }
    }
})

The lightness channel sets the lightness of the markers. In this case the same measure (Popularity) is added to it that is on the y-axis, meaning that columns’ height and lightness represent the same values. The legend for the lightness channel is turned on using the legend property.

Info

This is an example when we explicitly instruct Vizzu to show the legend. By default Vizzu automatically shows/hides the legend when it's necessary. You can also turn it off with the legend: null setting or set back to automatic mode with legend: 'auto'.

chart.animate({
    config: {
        channels: {
            lightness: {
                attach: ['Popularity']
            }
        },
        legend: 'lightness'
    }
})

The color channel sets the color of the markers. The same dimension (Genres) is put on it that is on the x-axis resulting in each bar having a different color. If a measure is put on the color channel, a color range will be used.

Info

The value on the lightness channel is removed in this step as it doesn’t make sense to use it together with the color channel in this case.

chart.animate({
    config: {
        channels: {
            lightness: {
                set: null
            },
            color: {
                attach: ['Genres']
            }
        },
        legend: 'color',
    }
})

The size channel sets the size of the markers if the geometry is circle - where size sets the radius of the circles - or line - where size determines line width. It is ignored when using rectangle or area geometry. This is why we change the geometry to circle in the example.

chart.animate({
    config: {
        channels: {
            size: {
                set: ['Popularity']
            }
        },
        geometry: 'circle'
    }
})