Stacked Stream

Info - How to setup Chart

import pandas as pd
from ipyvizzu import Chart, Data, Config, Style
 
df = pd.read_csv(
    "https://ipyvizzu.vizzuhq.com/0.18/assets/data/music_industry_history_1.csv",
    dtype={"Year": str, "Timeseries": str},
)
data = Data()
data.add_df(df)
 
chart = Chart()
chart.animate(data)

This is a 2-step animation:

1st:

• set the Split parameter to True
• set the Align parameter to 'min'

2nd:

• move the Dimension from the Y-axis to the X-axis (before the other)
• set the Split parameter to False

method = """
            const year = parseFloat(event.detail.text)
            if (!event.detail.text.includes('$') && !isNaN(year) && year % 5 !== 0)
                event.preventDefault()
        """
handler = chart.on("plot-axis-label-draw", method)
 
chart.animate(
    Config(
        {
            "channels": {
                "x": "Year",
                "y": ["Revenue", "Format"],
                "color": "Format",
            },
            "geometry": "area",
            "align": "center",
        }
    ),
    Style(
        {
            "plot": {
                "xAxis": {"label": {"angle": 0}},
                "yAxis": {"label": {"numberScale": "K, M, B, T"}},
            }
        }
    ),
)
 
chart.animate(Config({"align": "none", "split": True}))
 
chart.animate(
    Config(
        {
            "channels": {"x": ["Format", "Year"], "y": "Revenue"},
            "split": False,
        }
    ),
    Style({"plot": {"xAxis": {"label": {"angle": None}}}}),
)
 
chart.feature("tooltip", True)