Headline, title, display key and footnote

Updated at June 29th, 2020

You can customize the headlines, titles, footnotes and formats for any element.

The most direct way to edit the headline, title, display key or footnote is to press on them, and when they turn editable, type in them directly.

More properties dialog...

Another way to edit these properties is to press the edit icon and select "More properties". This will bring up a dialog in which you can edit directly:

Edit JSON dialog

Another approach is to edit the properties directly in JSON.  Here's a quick cheat sheet to common properties:


Specifies a different string to display in the element's header. This might be handy if the survey define a column with key s0 but you would prefer the user to see Specialty instead. In this case you might have:

   "key": "s0", 
   "displayKey": "Specialty"


Bold text that appears below the element header. The headline for an element is the key takeaway that is representative of the chart. Many elements may not need a headline. 

"headline": "Majority of respondents would say they are pretty happy"


Longer text that appears below the headline. For instance, the element specialty might have the title "Doctor, what is your primary specialty?"

"title": "Q.1 Generally, how would you say things are these days in your life 
- would you say that you are very happy, pretty happy, or not too happy?"


If title text includes HTML (e.g. images, bold/italic, etc), showHTML will allow the text to be shown with:

"showHtml": "true"


Text that appears at the bottom of the element as gray and italicized. It's useful for permanent notes related to the element, such as applied skip patterns and whether missing values are shown.

"footnote": "all respondents"

color heritable

The color of the element icon. It may be any CSS named color (e.g. "color": "gold") or hexadecimal color code (e.g."color": "#FA0")

colors heritable

The colors of the chart. (e.g. stack chart) It may be any CSS named color (e.g. "color": "gold") or hexadecimal color code (e.g."color": "#FA0")

format heritable < object >

Translates raw values to human-readable strings for display. Underlying value is unchanged. Formats are directly comparable to SPSS value labels. Formats are specified as Javascript objects with the raw value as the key and the formatted string as the value, e.g.

   "format": {
       "AD": "Andora", 
       "AI": "Anguila", 
       "AG": "Antigua", 
       "AR": "Argentina", 

If no format is defined, then all raw values that appear in the data are displayed directly in the distribution. If a format is defined, then all formatted values appear in the distribution, whether or not they have data values. Values that exist in the data but are not defined in the format will appear under "Other".

You can toggle formatted value vs. raw value using the Format button.


Valid Values are: ("independent"|"compact"|"checkbox")

  • "independent"
  • "compact"
  • "checkbox"

Was this article helpful?