Protobi

← All help posts

View post

# Protobi `chartType` Reference

## Overview

The `chartType` property on a Protobi element controls how that element is visualized. Protobi supports a wide range of chart types from simple baselines to Plotly-powered interactive charts, geographic maps, text analysis tools, and layout containers.

---

## Usage

Set `chartType` as a top-level property on any element:

```json
{
  "key": "Q3",
  "title": "Treatment satisfaction",
  "chartType": "PieChart",
  "format": {
    "1": "Extremely satisfied",
    "2": "Somewhat satisfied",
    "3": "Dissatisfied"
  }
}
```

Combine with `chartOptions` to further customize display:

```json
{
  "key": "Q5",
  "title": "Awareness over time",
  "chartType": "LineChart",
  "chartOptions": {
    "orientation": "h",
    "showlegend": true,
    "height": 400
  }
}
```

---

## Baseline & Bar Charts

Baseline charts are the heart of Protobi. `BaselineBarChart` is the default for most categorical variables and compares the current filter subset to a baseline population with significance testing.

| chartType value | Rendered as | Description |
|---|---|---|
| `BaselineBarChart` | `BaselineBarChart` | Baseline charts are the heart of Protobi. Deceptively simple, they work the same for every survey data type, from categorical variables, grids, ratings, numeric open, text open ends, and more. So named because they compare the current subset of respondents to a baseline population, highlighting statistically significant differences. |
| `BarChart` | `PlotlyBarChart` | An interactive data visualization tool that represents categorical data with horizontal rectangular bars. Each bar's length is proportional to the value it represents. |
| `StackedBarChart` | `PlotlyBarChart` | Represents categorical data with horizontal rectangular bars. Each bar's length is proportional to the value it represents. |
| `ColumnChart` | `PlotlyColumnChart` | An interactive data visualization tool that represents categorical data with vertical rectangular bars. Each bar's length is proportional to the value it represents. |
| `StackedColumnChart` | `PlotlyColumnChart` | Represents categorical data with vertical rectangular bars. Each bar's length is proportional to the value it represents. |
| `Political` | `Primary` | Also known as PrintLayout chart, Political Chart or Beta chart. Designed to provide precise control over layout and a wide variety of options, within a coherently styled family of charts. Displays series of ratings in compact form with color gradients generated from your theme. For long labels, can be wrapped instead of truncated and/or displayed above the bars for space. |
| `Primary` | `Primary` | Also known as PrintLayout chart, Political Chart or Beta chart. Designed to provide precise control over layout and a wide variety of options, within a coherently styled family of charts. Displays series of ratings in compact form with color gradients generated from your theme. For long labels, can be wrapped instead of truncated and/or displayed above the bars for space. |
| `TopBoxTornado` | `TopBoxTornado` | A type of bar chart used in sensitivity analysis to compare the relative importance of different variables. Called a tornado chart because of its appearance: bars are arranged in descending order of length, creating a shape that resembles a tornado. |
| `TopBoxTornadoBaseline` | `TopBoxTornadoBaseline` | Adds a baseline comparison to the `TopBoxTornado` view. |
| `Highlighter` | `HighlighterChart` | Highlights the most occurring/answered responses. |
| `CumulativeLineChart` | `CumulativeLineChart` | Shows the cumulative total by value. Useful for tracking completion dates, height-weight curves, or Van Westendorp price curves. |

---

## Plotly Charts

These chart types are rendered using Plotly.js and support the full set of `chartOptions` Plotly properties (dimensions, margins, axes, legend, trace, etc.).

| chartType | value | Description |
|---|---|---|
| `LineChart` | `PlotlyLineChart` | A type of graph that displays information as a series of data points called 'markers' connected by straight line segments. Used to visualize the trend of a variable over time or a continuous sequence. |
| `PieChart` | `PlotlyPieChart` | A circular statistical graphical chart divided into slices to illustrate numerical proportions. Each slice represents a category's contribution to the whole, with size corresponding to the percentage or proportion of that category. |
| `DoughnutChart` | `PlotlyDoughnutChart` | A variant of a pie chart with a blank center, creating a doughnut-like appearance. |
| `ScatterChart` | `PlotlyScatterChart` | Also known as a scatter plot. Displays values for typically two variables as a collection of points. Each point represents an observation, with position determined by the values of the variables on the x- and y-axis. |
| `TreeMap` | `PlotlyTreeMap` | A Plotly chart that sizes and colors nested rectangles by their values. |
| `Gists` | `Gists` | Shows scatter-style data points with an interactive legend for toggling traces. |
| `PMap` | `PMap` | A perceptual map or positioning map used to show correspondence or relationship between items in two dimensions. |
| `Zipf` | `ZipfDiagram` | Plots frequency by rank on a log-log scale to inspect Zipf-like distributions. |
| `TrendTable` | `TrendTable` | Highlights change across time periods with colored comparison cells. |
| `KaplanMeier` | `KaplanMeier` | Surveys often elicit time intervals, as start and end dates. The Kaplan-Meier survival curve is a tool from clinical research that provides a simple, assumption-free way to describe the distribution of time intervals even when many are still continuing. |

---

## Tables & Grids

| chartType | value | Description |
|---|---|---|
| `SummaryTable` | `SummaryTable` | A crosstab or summary table showing marginal distributions and summary statistics. |
| `BigTab` | `SuperTable` | A stylized crosstab table where you can add as many crosstabs. |
| `SuperTable` | `SuperTable` | A stylized crosstab table where you can add as many crosstabs. |
| `SuperTables` | `SuperTables` | Generate large crosstabs and export to Excel. |
| `DataGrid` | `DataGrid` | Shows information in a grid-like structure, like a table. |
| `PairedTable` | `PairedTable` | Allows you to neatly display collections of questions together, and run pairwise comparisons for stronger statistical tests. |
| `VerticalPairedTable` | `VerticalPairedTable` | A transposed `PairedTable` where rows and columns are swapped for easier comparison. |
| `PairedGrid` | `PairedGrid` | Shows nested rows and columns in a grid with bar visualizations and heatmap-style comparisons. |
| `PairedGridWorksheet` | `PairedGridWorksheet` | Displays a `PairedGrid` in worksheet mode for structured editing and review. |
| `Verbatim` | `Verbatim` | A table where all empty values are hidden by default. Each column is independent and cells do not have a relation with their row. |
| `Worksheet` | `WorksheetChart` | Just like an Excel spreadsheet — it has a table and cells. A user can edit the cell as markdown, change height and width of the cells, merge cells, change background color and text color, etc. |

---

## Flow & Sankey Diagrams

Sankey diagrams are sometimes useful to show the relationship between discrete variables. Applications include progression of therapy, customer conversion, or almost any crosstab.

| chartType| value| Description |
|---|---|---|
| `SankeyDiagram` | `SankeyDiagram` | Shows the relationship between discrete variables. Applications include progression of therapy, customer conversion, or almost any crosstab. |
| `PlotlySankey` | `PlotlySankey` | A Sankey diagram rendered with Plotly for richer hover and layout options. |
| `SimpleSankey` | `SimpleSankey` | A lighter-weight Sankey chart with a simplified configurable layout. |

---

## Geographic Charts

| chartType| value | Description |
|---|---|---|
| `Choropleth` | `Choropleth` | Plot marginal distributions and crosstabs by geography. Choose defaults or set detailed options for scale, colors, etc. |
| `Chloropleth` | `Choropleth` | Plot marginal distributions and crosstabs by geography. Choose defaults or set detailed options for scale, colors, etc. |
| `HexMap` | `HexMap` | Hex maps are a way to show geography with states as equal areas. |
| `Squaire` | `Squaire` | Wall Street Journal-style Squaires map — a stylized way to show geography while showing each state as equal area. |

---

## Text & Open-End Charts

| chartType| value | Description |
|---|---|---|
| `WordCloud` | `WordCloud` | Word clouds are a fun way to quickly see the gist of text responses. Protobi can take care of the practical details like split sentences at word boundaries or delimiters, put everything in the same case, combine spelling variations, keep certain phrases together, limit the number of words to an absolute count or threshold frequency, etc. |
---

## Specialized Charts

| chartType| value | Description |
|---|---|---|
| `VennDiagram` | `VennDiagram` | Venn diagrams can be set for any collection of checkboxes or elements that can be compacted to a single value. Protobi can show more than three circles, with a reasonable best-fit approximation. |
| `Abacus` | `Abacus` | Currently only supported for Group of Groups. A type of data visualization that resembles the appearance of an abacus, where data points are represented as beads on rods or lines. |
| `IntervalChart` | `IntervalChart` | A timeline-style chart for displaying date or duration intervals per respondent or record. |
| `IntervalSet` | `IntervalSet` | Groups multiple interval timelines together for comparison. |
| `ConjointBaseline` | `ConjointBaseline` | Shows the baseline scenario used in conjoint analysis. |
| `ConjointImportance` | `ConjointImportance` | This is an experimental chart. |
| `ConjointSelector` | `ConjointSelector` | This is an experimental chart. |
| `ConjointSensitivity` | `ConjointSensitivity` | This is an experimental chart. |

---

## Layout & Structure

These chart types organize and contain other elements rather than visualizing data directly.

| chartType| value| Description |
|---|---|---|
| `Collection` | `Collection` | Multiple elements (even collections) can be grouped together. Set `type: "empty"` for groups that don't have their own data column. |
| `FilterPanel` | `FilterPanel` | A group where children are converted into clickable filters. Enables a user to click a row of a child element to drill in to its value. |
| `Tabs` | `TabCollection` | A subtype of a collection where multiple elements can be put in a tabular format and only one element is visible at once. |
| `Pageable` | `PageableCollection` | A collection layout with pagination or scrolling for stepping through child elements. |
| `Scrollable` | `PageableCollection` | A collection layout with pagination or scrolling for stepping through child elements. |
| `Slide` | `Slide` | Each Protobi element can be arranged like a PowerPoint slide. This lets you see how it will export to PowerPoint, and potentially streamline the workflow from analysis to presentation. |
| `Document` | `Document` | Generates formatted report documents with embedded charts and tables. |
| `Checklist` | `ChecklistView` | A notes view with completion tracking for tasks and to-do items. |
| `Notes` | `NotesView` | Shows all of the notes of the current project. A user can filter between completed or incomplete notes. |

---

## Export & Utility

| chartType| value | Description |
|---|---|---|
| `ElementTree` | `ElementTree` | A hierarchical field and element navigator with filtering and expand-collapse controls. |
| `ElementTreeMap` | `ElementTreeMapView` | Displays the element hierarchy in a treemap layout. |
| `Inventory` | `Inventory` | Shows all the inventory of the current project: rows, columns, all elements, etc. |
| `PPTXConnector` | `PPTXConnector` | Connects Protobi elements to PowerPoint export workflows. |
| `XLSXtoPPTX` | `XLSXtoPPTX` | Converts Excel-based content into a PowerPoint presentation. |

---

## Complete `chartType` List

All valid `chartType` values and their resolved renderers, derived directly from the widget registry, in alphabetical order.

|chartType | value |
|---|---|
| `Abacus` | `Abacus` |
| `AbstractElement` | `AbstractElement` |
| `BarChart` | `PlotlyBarChart` |
| `BaselineBarChart` | `BaselineBarChart` |
| `BasicElement` | `BasicElement` |
| `BigTab` | `SuperTable` |
| `Checklist` | `ChecklistView` |
| `Chloropleth` | `Choropleth` |
| `Choropleth` | `Choropleth` |
| `Collection` | `Collection` |
| `ColumnChart` | `PlotlyColumnChart` |
| `ConjointBaseline` | `ConjointBaseline` |
| `ConjointImportance` | `ConjointImportance` |
| `ConjointSelector` | `ConjointSelector` |
| `ConjointSensitivity` | `ConjointSensitivity` |
| `CumulativeLineChart` | `CumulativeLineChart` |
| `DataGrid` | `DataGrid` |
| `Document` | `Document` |
| `DoughnutChart` | `PlotlyDoughnutChart` |
| `ElementTree` | `ElementTree` |
| `ElementTreeMap` | `ElementTreeMapView` |
| `FilterPanel` | `FilterPanel` |
| `Foo` | `WordCloud` |
| `Gists` | `Gists` |
| `HexMap` | `HexMap` |
| `Highlighter` | `HighlighterText` |
| `IntervalChart` | `IntervalChart` |
| `IntervalSet` | `IntervalSet` |
| `Inventory` | `Inventory` |
| `KaplanMeier` | `KaplanMeier` |
| `LineChart` | `PlotlyLineChart` |
| `Notes` | `NotesView` |
| `Pageable` | `PageableCollection` |
| `PairedGrid` | `PairedGrid` |
| `PairedGridWorksheet` | `PairedGridWorksheet` |
| `PairedTable` | `PairedTable` |
| `PieChart` | `PieChart` |
| `PieChart` | `PlotlyPieChart` |
| `PlotlySankey` | `PlotlySankey` |
| `PMap` | `PMap` |
| `Political` | `Primary` |
| `PPTXConnector` | `PPTXConnector` |
| `Primary` | `Primary` |
| `SankeyDiagram` | `SankeyDiagram` |
| `ScatterChart` | `PlotlyScatterChart` |
| `Scrollable` | `PageableCollection` |
| `SimpleSankey` | `SimpleSankey` |
| `Slide` | `Slide` |
| `Squaire` | `Squaire` |
| `StackedBarChart` | `PlotlyBarChart` |
| `StackedColumnChart` | `PlotlyColumnChart` |
| `SummaryTable` | `SummaryTable` |
| `SuperTable` | `SuperTable` |
| `SuperTables` | `SuperTables` |
| `SVGChart` | `BasicElement` |
| `Tabs` | `TabCollection` |
| `TopBoxTornado` | `TopBoxTornado` |
| `TopBoxTornadoBaseline` | `TopBoxTornadoBaseline` |
| `TreeMap` | `PlotlyTreeMap` |
| `TrendTable` | `TrendTable` |
| `VennDiagram` | `VennDiagram` |
| `Verbatim` | `Verbatim` |
| `VerticalPairedTable` | `VerticalPairedTable` |
| `WordCloud` | `WordCloud` |
| `Worksheet` | `WorksheetChart` |
| `XLSXtoPPTX` | `XLSXtoPPTX` |
| `Zipf` | `ZipfDiagram` |

Publishing

Date

Status

Slug edit

Content

Thumbnail

Categories Manage

Tools

AI Database

Publishing

Content

Tools

Danger zone