Chart layout

Vizzu has three separate parts of the chart layout: the plot area that contains the chart, the title containing the chart title on the top, and the legend on the left. Vizzu automatically hides the legend when it’s unnecessary to show it. When the title is not in use, Vizzu hides that part automatically as well. Each of these parts have their own paddings on all four sides that adjust to the chart size by default, but can also be set with the appropriate settings in the style object. All size parameters can be set in pixel, percentage and em.

We add different background colors to the parts of the layout to show how they are aligned.

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, Style

chart = Chart()

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

chart.animate(data)

chart.animate(
    Config(
        {
            "channels": {"y": {"set": ["Popularity", "Kinds"]}, "x": {"set": "Genres"}},
            "label": {"attach": "Popularity"},
            "color": {"set": "Kinds"},
            "title": "Plot, title and legend background",
        }
    )
)

chart.animate(
    Style(
        {
            "title": {"backgroundColor": "#A0A0A0"},
            "plot": {"backgroundColor": "#D2D2D2"},
            "legend": {"backgroundColor": "#808080"},
        }
    )
)

snapshot1 = chart.store()

Setting the width of the legend.

In [2]:
chart.animate(snapshot1)

chart.animate(Config({"title": "Legend width"}))

chart.animate(Style({"legend": {"width": 50}}))

snapshot2 = chart.store()

Setting the legend width back to its default value.

In [3]:
chart.animate(snapshot2)

chart.animate(Style({"legend": {"width": None}}))

snapshot3 = chart.store()

Changing the title paddings. By default, the title is horizontally centered above the chart. In this example, we set the title’s left padding, resulting in the text moving to the right.

In [4]:
chart.animate(snapshot3)

chart.animate(Config({"title": "Title padding"}))

chart.animate(
    Style({"title": {"paddingTop": 20, "paddingBottom": 20, "paddingLeft": 200}})
)

snapshot4 = chart.store()

Setting the title paddings back to their default values.

In [5]:
chart.animate(snapshot4)

chart.animate(
    Style({"title": {"paddingTop": None, "paddingBottom": None, "paddingLeft": None}})
)

snapshot5 = chart.store()

Changing the paddings of the plot area to position the plot. The texts on the axes are drawn on the padding of the plot and not the plot itself.

In [6]:
chart.animate(snapshot5)

chart.animate(Config({"title": "Plot padding"}))

chart.animate(Style({"plot": {"paddingLeft": 100, "paddingRight": 100}}))

snapshot6 = chart.store()

Setting the plot paddings back to their default values.

In [7]:
chart.animate(snapshot6)

chart.animate(Style({"plot": {"paddingLeft": None, "paddingRight": None}}))

Next chapter: Animation options ----- Previous chapter: Color palette & fonts ----- Back to the Table of contents