Colors

Customizing colors in Protobi

38d87d9852a66eea29da00ae16511664

Updated at October 13th, 2019

Part of the fun of delivering Protobi to clients is showing it in your colors and brand — or better yet, in theirs.  You can use colors to organize elements and groups, and set colors for individual values.

Set element color

You can set element color (the color for the upper left square or circle) in Protobi using the Colors dialog in the context menu. To set colors for an element, press the edit icon and choose "Color..." from the menu:


This will bring up the Colors dialog:

Colors propagate recursively so you can set colors for entire sections at once.

Set chart colors

You can also select a color theme for values within certain chart types. For instance, a stacked bar chart assumes colors are "ascending" which in the default theme is colored from blue to green.

You can set the theme to "descending": 

Colors will appear from green to blue:

Detailed control of colors

For detailed control you can specify exact colors as an object in JSON, e.g.:

  "colors": {
        "1": "orchid",
        "2": "violet",
        "3": "lavender",
        "4": "#CCC",
        "5": "lightgreen",
        "6": "chartreuse",
        "7": "green"
    }

It will make that specific element and its children appear with those colors: 

Set global color schemes in Protobi

You can set the available color palettes by specifying a "colors" attribute in the project's root element. 

Press the trigram ( ☰) in the toolbar and select "Edit JSON..." from the context menu.

In the JSON, edit the "colors" attribute to define specific themes. The key is the theme name and the colors can specified as an array or object. If a theme named "default" is present, that will be the palette available for element colors.

For example, for the four themes - default, rainbow, ascending and descending:    

See JSON code for colors


"colors": {
        "default": [
            "#39C",
            "#9B6",
            "#26A",
            "#FC0",
            "#888",
            "#FA2",
            "#808"
        ],
        "rainbow": [
            "red",
            "orange",
            "yellow",
            "green",
            "blue",
            "indigo",
            "purple"
        ],
        "ascending": [
            "#3399BB",
            "#99CC66"
        ],
        "descending": [
            "#99CC66",
            "#3399BB"
        ]
    }



Now that global colors theme is defined, we can use the attribute"colors":"rainbow" :

Colorway

The attribute "colors" dictate chart colors for Protobi specific charts, while "colorway" is used mostly for plot.ly charts. Below is the syntax for colorway.

"chartOptions": {
"colorway": [
"#39C",
"#9B6",
"#26A",
"#FC0",
"#888",
"#FA2",
"#808"
]
}

Was this article helpful?