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.

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

data = Data()

data.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data.add_dimension('Types', [ 'Hard', 'Smooth', 'Experimental' ])

data.add_measure(
    'Popularity',
    [
        [114, 96, 78, 52],
        [56, 36, 174, 121],
        [127, 83, 94, 58],
    ]
)

chart = Chart()
chart.animate(data)
chart.animate(Config({
    "channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}, 
    "label": {"attach": ["Popularity"]},
    "color": {"set": ["Types"]},
    "title": "Plot, title and legend background"
}))
chart.animate(Style({
    "title": { "backgroundColor": '#A0A0A0' },
    "plot": { "backgroundColor": '#D2D2D2' },
    "legend": { "backgroundColor": '#808080' }
}))
chart.show()

Setting the width of the legend.

In [2]:
from ipyvizzu import Chart, Data, Config, Style

data = Data()

data.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data.add_dimension('Types', [ 'Hard', 'Smooth', 'Experimental' ])

data.add_measure(
    'Popularity',
    [
        [114, 96, 78, 52],
        [56, 36, 174, 121],
        [127, 83, 94, 58],
    ]
)

chart = Chart()
chart.animate(data)
chart.animate(
    Config({
        "channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}, 
        "label": {"attach": ["Popularity"]},
        "color": {"set": ["Types"]},
        "title": "Legend width"
    }),
    Style({
    "title": { "backgroundColor": '#A0A0A0' },
    "plot": { "backgroundColor": '#D2D2D2' },
    "legend": { "backgroundColor": '#808080' }
    }))
chart.animate(Style({
    "legend": { "width": 50 }
}))
chart.show()

Setting the legend width back to its default value.

In [3]:
from ipyvizzu import Chart, Data, Config, Style

data = Data()

data.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data.add_dimension('Types', [ 'Hard', 'Smooth', 'Experimental' ])

data.add_measure(
    'Popularity',
    [
        [114, 96, 78, 52],
        [56, 36, 174, 121],
        [127, 83, 94, 58],
    ]
)

chart = Chart()
chart.animate(data)
chart.animate(
    Config({
        "channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}, 
        "label": {"attach": ["Popularity"]},
        "color": {"set": ["Types"]},
        "title": "Legend width"
    }),
    Style({
    "title": { "backgroundColor": '#A0A0A0' },
    "plot": { "backgroundColor": '#D2D2D2' },
    "legend": {
        "backgroundColor": '#808080',
        "width": 50
    }}))
chart.animate(Style({
    "legend": { "width": "null" }
}))
chart.show()

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]:
from ipyvizzu import Chart, Data, Config, Style

data = Data()

data.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data.add_dimension('Types', [ 'Hard', 'Smooth', 'Experimental' ])

data.add_measure(
    'Popularity',
    [
        [114, 96, 78, 52],
        [56, 36, 174, 121],
        [127, 83, 94, 58],
    ]
)

chart = Chart()
chart.animate(data)
chart.animate(
    Config({
        "channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}, 
        "label": {"attach": ["Popularity"]},
        "color": {"set": ["Types"]},
        "title": "Title padding"
    }),
    Style({
    "title": { "backgroundColor": '#A0A0A0' },
    "plot": { "backgroundColor": '#D2D2D2' },
    "legend": { "backgroundColor": '#808080'}}))
chart.animate(Style({
    "title": {
        "paddingTop": 20,
        "paddingBottom": 20,
        "paddingLeft": 200
    }
}))
chart.show()

Setting the title paddings back to their default values.

In [5]:
from ipyvizzu import Chart, Data, Config, Style

data = Data()

data.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data.add_dimension('Types', [ 'Hard', 'Smooth', 'Experimental' ])

data.add_measure(
    'Popularity',
    [
        [114, 96, 78, 52],
        [56, 36, 174, 121],
        [127, 83, 94, 58],
    ]
)

chart = Chart()
chart.animate(data)
chart.animate(
    Config({
        "channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}, 
        "label": {"attach": ["Popularity"]},
        "color": {"set": ["Types"]},
        "title": "Title padding"
    }),
    Style({
    "title": {
        "backgroundColor": '#A0A0A0',
        "paddingTop": 20,
        "paddingBottom": 20,
        "paddingLeft": 200},
    "plot": { "backgroundColor": '#D2D2D2' },
    "legend": { "backgroundColor": '#808080'}}))
chart.animate(Style({
    "title": {
        "paddingTop": "null",
        "paddingBottom": "null",
        "paddingLeft": "null"
    }
}))
chart.show()

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]:
from ipyvizzu import Chart, Data, Config, Style

data = Data()

data.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data.add_dimension('Types', [ 'Hard', 'Smooth', 'Experimental' ])

data.add_measure(
    'Popularity',
    [
        [114, 96, 78, 52],
        [56, 36, 174, 121],
        [127, 83, 94, 58],
    ]
)

chart = Chart()
chart.animate(data)
chart.animate(
    Config({
        "channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}, 
        "label": {"attach": ["Popularity"]},
        "color": {"set": ["Types"]},
        "title": "Plot padding"
    }),
    Style({
    "title": {
        "backgroundColor": '#A0A0A0'},
    "plot": { "backgroundColor": '#D2D2D2' },
    "legend": { "backgroundColor": '#808080'}}))
chart.animate(Style({
    "plot": {
        "paddingLeft": 100,
        "paddingRight": 100
    }
}))
chart.show()

Setting the plot paddings back to their default values.

In [7]:
from ipyvizzu import Chart, Data, Config, Style

data = Data()

data.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data.add_dimension('Types', [ 'Hard', 'Smooth', 'Experimental' ])

data.add_measure(
    'Popularity',
    [
        [114, 96, 78, 52],
        [56, 36, 174, 121],
        [127, 83, 94, 58],
    ]
)

chart = Chart()
chart.animate(data)
chart.animate(
    Config({
        "channels": {"y": {"set": ["Popularity", "Types"]}, "x": {"set": "Genres"}}, 
        "label": {"attach": ["Popularity"]},
        "color": {"set": ["Types"]},
        "title": "Plot padding"
    }),
    Style({
    "title": {
        "backgroundColor": '#A0A0A0'},
    "plot": {
        "backgroundColor": '#D2D2D2',
        "paddingLeft": 100,
        "paddingRight": 100},
    "legend": { "backgroundColor": '#808080'}}))
chart.animate(Style({
    "plot": {
        "paddingLeft": "null",
        "paddingRight": "null"
    }
}))
chart.show()