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

"Color..." dialog

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

This will bring up the Color dialog:

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

JSON editor

You can also set element color in the JSON editor by using the "color" attribute. You can use any Hex color code to define the color. 

"color" : "#db7093",

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. The numbers represent the value for which the color is assigned 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:    

"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"
]
}