Color palette & fonts

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;

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": "Color palette",
        }
    )
)

chart.animate(
    Style({"plot": {"marker": {"colorPalette": "#9355e8FF #123456FF #BDAF10FF"}}})
)

snapshot1 = chart.store()

Note: Add the following code to log the actual style of the chart in the browser console.

In [2]:
from ipyvizzu import ChartProperty

chart.log(ChartProperty.STYLE)

Changing the title font size will only affect the title; all other font sizes remain the same. CSS version: --vizzu-title-fontSize: 50;

In [3]:
chart.animate(snapshot1)

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

chart.animate(Style({"title": {"fontSize": 50}}))

snapshot2 = chart.store()

This is how to set the font size back to its default value.

In [4]:
chart.animate(snapshot2)

chart.animate(Config({"title": "Title font size - back to default"}))

chart.animate(Style({"title": {"fontSize": None}}))

snapshot3 = chart.store()

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.

In [5]:
chart.animate(snapshot3)

chart.animate(Config({"title": "Setting all font sizes in one step"}))

chart.animate(Style({"fontSize": 20}))

snapshot4 = chart.store()

You can reset styles to default on any levels by setting them to null.

In [6]:
chart.animate(snapshot4)

chart.animate(Config({"title": "Setting all style settings back to default"}))

chart.animate(Style(None))

For information on all available style parameters see the reference documentation.

Next chapter: Chart layout ----- Previous chapter: Without coordinates & noop channel ----- Back to the Table of contents