# Group/stack¶

The following example shows how to group 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.

Note: The data used in this tutorial is available here. You can read more about the available types of data in the Adding data chapter.

In [1]:
from ipyvizzu import Chart, Data, Config

chart = Chart()

data = Data.from_json("./music_data.json")

chart.animate(data)

chart.animate(
Config(
{
"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}},
"title": "Creating a stacked chart",
}
)
)

chart.animate(
Config(
{
"channels": {
"y": {"attach": "Kinds"},
"color": {"attach": "Kinds"},
},
}
)
)

snapshot1 = chart.store()


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.

In [2]:
chart.animate(snapshot1)

chart.animate(
Config({"title": "...then you can add it to another channel = group elements..."})
)

chart.animate(
Config(
{
"channels": {
"y": {"detach": "Kinds"},
"x": {"attach": "Kinds"},
}
}
)
)

snapshot2 = chart.store()


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.

In [3]:
chart.animate(snapshot2)

chart.animate(
Config({"title": "...doing it the other way is how you stack your chart"})
)

chart.animate(
Config(
{
"channels": {
"y": {"attach": "Kinds"},
"x": {"detach": "Kinds"},
}
}
)
)