This and the next chapter provide a quick intro to the styling of the charts. You can either use the style property like in the following examples or use CSS. By using CSS, it's easier to set the same style for multiple charts on one page or re-use style settings.
If you use CSS, don't change the set parameters later on via the style property.
The font sizes automatically adjust to the chart size to help readability, and can also be set separately or for specific groups.
The color palette is changed to the colors we add here. The order of the dimension’s items in the data set determine which color belongs to which item as the colors are added one-by-one. If you want to use the same setting via CSS, you should add --vizzu-plot-marker-colorPalette: #9355e8FF #123456FF #BDAF10FF;
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": "Color palette"
}))
chart.animate(Style({
"plot": {
"marker": {
"colorPalette": "#9355e8FF #123456FF #BDAF10FF"
}
}
}))
chart.show()
Changing the title font size will only affect the title; all other font sizes remain the same. CSS version: --vizzu-title-fontSize: 50;
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": "Color palette"
}),
Style({
"plot": {
"marker": {
"colorPalette": "#9355e8FF #123456FF #BDAF10FF"
}
}
}))
chart.animate(Style({
"title": {
"fontSize": 50
}
}))
chart.show()
This is how to set the font size back to its default value.
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 font size"
}),
Style({
"plot": {
"marker": {
"colorPalette": "#9355e8FF #123456FF #BDAF10FF"
}
},
"title": {
"fontSize": 50
}
}))
chart.animate(Config({
"title": "Title font size - back to default"
}))
chart.animate(Style({
"title": {
"fontSize": "null"
}
}))
chart.show()
In case you change the font size of the whole chart with the top-level fontSize parameter then every font on the chart will grow/shrink proportionally. The size refers to the font size of the axis labels by default.
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": "Setting all font sizes in one step"
}),
Style({
"plot": {
"marker": {
"colorPalette": "#9355e8FF #123456FF #BDAF10FF"
}
}
}))
chart.animate(Style({"fontSize": 20}))
chart.show()
You can reset styles to default on any levels by setting them to null.
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": "Setting all style settings back to default"
}),
Style({
"plot": {
"marker": {
"colorPalette": "#9355e8FF #123456FF #BDAF10FF"
}
},
"fontSize": 20
}))
chart.animate(style="null")
chart.show()