Subplots or multiple plots overlaid?

[will-hill]

Is it possible to have two plot geometries in a single Chart? I would like to plot a time series 'line' for forecasting and 'circle' for actual values. Is this possible?

[veghdev]

Hi, it is not supported by default, but it can be solved with a little trickery, you have to create two separate charts and then place them on top of each other in javascript, see the example code below.

But the javascript solution could depend on the notebook type you are using, I tested it in a basic jupyter notebook.

import pandas as pd
from ipyvizzu import Chart, Data, Config, Style


df = pd.read_csv(
    "https://ipyvizzu.vizzuhq.com/0.17/assets/data/chart_types_eu.csv"
)
data = Data()
data.add_df(df)

chart1 = Chart()
chart1.animate(
    data, Config(
        {
            "channels": {
                "x": "Joy factors",
                "y": "Value 2 (+)"
            },
            "title": "Multi layer chart"
        }
    )
)

chart2 = Chart()
chart2.animate(
    data, Config(
        {
            "channels": {
                "x": {
                    "set": "Joy factors",
                    "markerGuides": True,
                    "labels": False,
                    "axis": False
                },
                "y": {
                    "set": "Value 1 (+)",
                    "interlacing": False,
                    "title": None
                },
            },
            "label": "Value 1 (+)",
            "geometry": "line",
            "title": ' '
        }
    ),
    Style(
        {
            "backgroundColor": "#ffffff00",
            "plot": {
                "marker": {
                    "colorPalette": "#FFA000"
                }
            }
        }
    )
)

reposition = f"""
let container1 = window.ipyvizzu.elements['{chart1._chart_id}']
let container2 = window.ipyvizzu.elements['{chart2._chart_id}']
container2.style = `
            width: ${{container1.width}}px; 
            height: ${{container1.height}}px; 
            position: absolute; 
            top: ${{container1.offsetTop}}px; 
            left: ${{container1.offsetLeft}}px;
`
container1.parentElement.appendChild(container2)
"""
chart2._display(reposition)

[veghdev]

If it works well, you should see the charts below