Print layout charts (beta)

Updated at May 6th, 2020

A new chart type designed for print layout is currently in beta.  This can displaydata neatly as bars and tables, with summary statistics, with many subtle variations to parallel the style used in many online and print publications.  

Below is an example 

Beta charts can be used to visualize groups of: 

  • Numeric questions
  • Ranking questions
  • Ratings questions
  • Categorical questions
  • Checkbox questions


Q15v2 is a group of numeric questions where respondents enter multiple percentages that sum to 100. Each product is a separate question and a child of Q15v2.

With Q15v2 set to a Beta chart type, its children will appear as variables on the left. Frequencies as stacked bars to the right.

Response values are represented at the top of the chart. In numeric groups, use the "Round by..." dialog to adjust value bins. 

Summary Statistics

Add or drop summary statistics by pressing the context menu and choosing "Statistics...".

The below example has the following stats selected: 

Chart colors

You can choose a preset color scheme for a chart from the "Color..." dialog. If you want to customize charts colors, you can specify colors in JSON.

Specify colors in JSON

In the JSON editor, specify "colors" as an object. The numbers represent the value that the color is assigned to. Protobi recognizes some HTML/CSS color names, but Hex color code can be used to define colors as well. 

Below are the colors specified in the chart above:

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

Show text that is cut off

In Beta charts, title text from individual questions translate to labels placed left of the bars. Title text is often long, and it is common to see text getting cut off in Beta charts.

You can choose the "wrap" chart option from the chart type dialog, but you can also set the chart's left margin to zero to place the full text above the chart bars.  

Set left margin to zero

There are two ways to set the left margin to zero. You can select the element (e.g. Q9v1) and drag the dotted box, or use the JSON editor. 

Drag left margin

Press on the element, and you will see a dotted box. Drag the left corner of the dotted box all the way to the left. 

JSON editor

Alternatively, you can open the JSON editor from the context menu and set "l" under the margin attribute to 0. 


With the left margin set to zero, text will appear above the colored bars. 


The Beta chart type is not recommended for crosstabbing.

Was this article helpful?