Protobi

← All help posts

View post

In this tutorial we explain how you can make changes to an element's chart using the "Chart type" dialog. For in-depth tutorials on particular chart topics try browsing through our [Charts](https://help.protobi.com/charts) help category.

## Change an element's chart type

To customize the chart for any element, select "Chart type..." from the context menu.

You can choose the chart type, chart options and toggle visibility of the legend.

Press to select an option. Green indicates that the option is selected. Press again to deselect. Choices that appear transparent are not available for the element you've selected.

<br>

### Example chart

By choosing the above options seen in the first image, this crosstabbed element is shown as a stacked bar chart with the legend on the right:

![null](</uploads/upload/image/5200/direct/1571065410081-1571065410081.png>)

## Chart types

Most of us are familiar with common chart types like: column, bar, line, pie, and scatter charts. Below is an overview of the chart types that are specific to Protobi.

### Standard

This is Protobi's default chart type. Response categories are on the left and small bars representing frequency are on the right.

![null](</uploads/upload/image/5200/direct/1581083160783-1581083160783.png>)

### Beta

Protobi's Print layout chart is useful for compacted groups. The child elements will appear as variables on the left with frequencies as stacked bars to the right. Response categories are represented at the top of the chart. Learn more about [Beta charts](</charts/beta-chart> "").

![null](</uploads/upload/image/5200/direct/1581082692841-1581082692841.png>)

### Tabs

If you prefer not to scroll down to view elements, you can set the group's chart type to Tabs. Each child element will be on an individual tab. This chart type is typically useful for groups with many children.

![null](</uploads/upload/image/5200/direct/1581083386483-How%20to%20get%20tab%20view%20of%20elements.gif>)

**Navigation tip**: Press on the group (e.g. Report) to select. You can then use the left and right arrows on your keyboard to quickly navigate through the tabs.

## Other chart types:

(press links for detailed tutorials)

- [PairedTable](</charts/paired-table> "")
- [TopBoxTornado](</charts/multiple-response-sets-topboxtornado> "")
- [C#umulative line charts](</charts/cumulative-line-charts> "")
- [Venn diagram](</charts/venn-diagram> "")
- [Word clouds](</text-open-end-questions/create-word-clouds-in-protobi> "")
- [PMAP: Perceptual map](<https://protobi.com/post/correspondence-maps> "Go to our blog post on Perceptual mapping")
- [Sankey flow diagrams](</charts/sankey-flow-diagrams> "")
- Data: Turns the chart into a data table

## Chart options

### Stack

For crosstabbed column or bar charts, we can choose a stacked view. The image on the left is a clustered column chart for **Q1** crosstabbed by **Speciality**. The image on the right shows what the same element looks like after we select "stack" under chart options.

![null](</uploads/upload/image/5200/direct/1581006448645-1581006448645.png>)

### Show bars

For standard charts, the default is to show bars. You can deselect "show bars" to hide the bars from view. This option also works for paired charts.

![null](</uploads/upload/image/5200/direct/1581005831081-1581005831081.png>)

### Swap

Below we have **Q1** crosstabbed by **Speciality **as a column chart. We can select "swap" in chart options to switch category and legend variables.

![null](</uploads/upload/image/5200/direct/1581085044937-q1%20by%20spec.png>)

### Overall

Below, **q7 **(crosstabbed by general **Satisfaction**) shows the percentage of respondents who chose "Very favorable" for each legend variable. If you select the "overall" option, a column showing the overall numbers regardless of satisfaction level will appear.

![null](</uploads/upload/image/5200/direct/1581085080664-q7%20satis.png>)

### Reverse-x and reverse-y

These options reverse the plotting order of categories on the axises. Below, we selected both reverse-x and reverse-y.

![null](</uploads/upload/image/5200/direct/1581016431979-1581016431979.png>)

### Wrap

This option wraps text that is too long to include in the chart. Below, the original view of the chart includes ellipsis where text is cut off. After selecting "wrap" in chart options we can see the full responses.

![null](</uploads/upload/image/5200/direct/1581098491312-unwrap%20text.png>)

## Legend

![null](</uploads/upload/image/5200/direct/1581004041198-1581004041198.png>)

Press the legend option to show legend. There are three options to determine legend position. If none are selected, the legend is defaulted to the "top" position.

## Slide

![null](</uploads/upload/image/5200/direct/1593440185586-1593440185586.png>)

For selected chart types, you can choose the slide layout option. This option arranges the Protobi element like a PowerPoint slide. An element with the slide option selected behaves the same as those without. They are still interactive and editable.

In slide layout, the [headline](<http://help.protobi.com/99791-new-and-updated-articles/titles-display-key-and-footnotes#headline-3> "") becomes the slide title and [title](<http://help.protobi.com/99791-new-and-updated-articles/titles-display-key-and-footnotes#title-4> "") becomes the slide text.

![null](</uploads/upload/image/5200/direct/1592930106331-1592930106331.png>)

The slide size, layout, fonts and styles are based on the PPTX template selected for your project. If a [Custom PPTX template](</admin-access/pptx-template> "") is not referenced in [Project overview](</admin-access/logo-and-splash-images> ""), the project will default to Protobi’s template.

Protobi has[ built-in defaults](<http://help.protobi.com/adminaccess/pptx-template#Basic%20settings-2> "") for various template sizes, including standard 4:3 (7.5 x 10in) as well as widescreen 16:9 in both small (5.63 x 10in) and large (7.5 x 13.33in).

## PowerPoint options

![null](</uploads/upload/image/5200/direct/1660064000672-1660064000672.png>)

**charts**: Export to PowerPoint as native, editable charts

**shapes**: Export as editable shapes and text

**image**: Export as static image

**keep table**: For Print layout charts, export legend, y-axis categories, and statistics columns as a table behind the chart

**update only**: Only update the chart data and keep other chart formatting as it is in the template. This is for projects with [custom PowerPoint templates](</admin-access/pptx-template> "").

## More properties

Use the keyboard shortcut: SHIFT + E + P to open "More properties", it is also available from the [Editor panel](</new-to-protobi/editorpanel>).

The![null](</uploads/upload/image/5200/direct/1581115422459-1581115422459.png>)indicates that the option is selected. Press to deselect the option.

The![null](</uploads/upload/image/5200/direct/1581103022851-1581103022851.png>)indicates that the option is not selected. One press will reset the option to the default state. Two presses will select the option.

The options readily available to edit are dependent on the chart type and options you've selected in the dialog. Add attributes by entering a "key" and "value" pair.

![null](</uploads/upload/image/5200/direct/1602674288641-1602674288641.png>)

Press the "+" sign next to each sub-category to expand and edit those additional options.

![null](</uploads/upload/image/5200/direct/1602675189442-1602675189442.png>)

You can reset all advanced chart options at once by pressing the "Reset…" button on the bottom right. There is also a button that lets you return to the "Chart type" dialog.

### Press directly on chart components to edit properties

You can press on the axises and legend to edit the properties.

![null](</uploads/upload/image/5200/direct/1689362078981-1689362078981.png>)

## Protobi and visualization libraries

A challenge in data visualization is that no matter how many options are available, the next chart you want to create often seems to require one more feature.

Protobi uses [Plotly.js](<https://plot.ly/> ""), a leading data visualization library for many charts, including bar, pie, line, scatter, column, etc. We use other libraries for specialized graphs, such as [Timothy Chien's](<https://twitter.com/timdream?lang=en> "Go to Twitter") library for [word clouds](</text-open-end-questions/create-word-clouds-in-protobi> "Go to our "Word clouds" tutorial article") and Ben Frederickson's library for [Venn diagrams](<http://help.protobi.com/charts-and-graphs/venn-diagram?from_search=37611451> "Go to our "Venn diagrams" tutorial article").

Protobi passes the chartOptions object directly through to the each library, allowing you to specify any of the myriad options available. Further we automatically fill in default values for many common options allowing you to easily browse the [JSON editor](</intermediate-editor/edit-json> "") and identify options you might specify. Choose "Edit JSON…" from the context menu to make changes to the chartType and chartOptions attributes.

Below, we've included the JSON for the [Example chart](<http://help.protobi.com/editaccess/charttypes#Example%20chart-1> "").

<div class="f-accordion-panel fr-inner" style="position: relative; left: 0px; top: 0px;"><p></p><h2><strong>JSON for the Example chart</strong></h2><p><br></p><pre prenum="0"></pre><p><br></p><div class="far fa-arrows-alt ui-sortable-handle" title="Move"><br></div><div class="far fa-trash-alt" title="delete"><br></div><p></p></div>

<br>

### Special charts (not seen in Chart type dialog)

- [US State maps](</charts/us-state-maps> "")
- [Google Maps chart](</_questions/399922> "")
- [Kaplan-Meier curves](</intermediate-editor/kaplan-meier-survival-curves> "")
- [Van Westendorp's Price Sensitivity Meter](</charts/van-westendorp-price-sensitivity-meter> "")

<br>

## Video tutorial

Watch this brief video on the Chart type dialog in Protobi.

[Chart types](/videos/chart-types-video)

Publishing

Date

Status

Slug edit

Content

Thumbnail

Categories Manage

Tools

AI Database

Publishing

Content

Tools

Danger zone