Chart presets

Throughout this tutorial, we have shown you how to create charts with Vizzu using a chart type-agnostic, uniform way without being limited to a predefined set of available charts. But sometimes, when you know the chart type you want to use, it is easier to start with that and skip configuring it from scratch. For this reason, Vizzu provides preset chart configurations for many known chart types. See the preset galery for all available presets.

Use the methods of the presets static property of the Vizzu class to build a chart based on a preset. These methods return chart configuration objects that can be passed to the animate method. For example, this is how to create a stacked bubble chart using its preset.

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


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


chart = Chart()

chart.animate(data)

chart.animate(
    Config.stackedBubble(
        {
            "size": "Popularity",
            "color": "Kinds",
            "stackedBy": "Genres",
        }
    )
)

snapshot1 = chart.store()

Presets will override all channels, removing all previously set series from the chart. Using a preset will also explicitly set most chart configuration parameters. Exceptions to this are the legend, title, reverse, and sort properties that can be set while using a preset. Here's an example of a preset where chart elements are sorted by value.

In [2]:
chart.animate(snapshot1)

chart.animate(
    Config.radialStackedBar(
        {
            "angle": "Popularity",
            "radius": "Genres",
            "stackedBy": "Kinds",
            "sort": "byValue",
        }
    )
)

snapshot2 = chart.store()

As you will see, the preset doesn't override the previously configured sorting and wouldn't affect the rest of the chart config parameters mentioned above either.

Presets will affect chart configuration, but you might also want to set the style or the underlying data.

In [3]:
chart.animate(snapshot2)

chart.animate(
    Config.radialBar(
        {
            "angle": "Popularity",
            "radius": "Genres",
        }
    ),
    Style({"plot.xAxis.interlacing.color": "#ffffff00"}),
);

Previous chapter: Shorthands & Store ----- Back to the Table of contents