Skip to content

Group/stack

The following example shows how to group, regroup and stack elements of a bar chart.

To get a stacked chart, you need to add a new dimension to the same channel where the measure is: the y-axis. However, since doing only this would result in multiple column chart elements with the same color stacked on top of each other, we also add the same dimension to the color channel.

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']
            }
        }
    }
})

chart.animate({
    config: {
        channels: {
            y: {
                attach: ['Kinds']
            },
            color: {
                attach: ['Kinds']
            }
        }
    }
})

By detaching this newly added dimension from the y-axis and attaching it to the x-axis, you get a grouped bar chart in a way that is easy to follow for the viewer.

chart.animate({
    config: {
        channels: {
            y: { detach: ['Kinds'] },
            x: { attach: ['Kinds'] }
        }
    }
})

In order to change the category via which the elements are grouped, just change the order of the dimension with another one on the same axis.

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

To stack a grouped chart, you just have to do the same thing the other way around: detach the dimension from the x-axis and attach it to the y-axis.

chart.animate({
    config: {
        channels: {
            x: { detach: ['Kinds'] },
            y: { attach: ['Kinds'] }
        }
    }
})