Compose Text Dialog

The Compose Text dialog lets you define how text is displayed for chart items, axis labels, legend labels, geo map labels, and tooltips. You can combine plain text, data values, rich text styles, images, and HTML formatting using a simple syntax.

Overview

The Compose Text dialog is available on fields that control label or tooltip formatting across your chart:

The button to open the dialog reads Compose Text or Compose Text / Styles / Images when rich text or images are available for insertion. The button's background color indicates whether formatting is active, white means the no text is currently defined. The dialog opens as a draggable, resizable window.

The Editor

The main code editor is where you write your format string. It uses syntax highlighting to help you read and write expressions:

Inserting Data

The Insert Data section shows clickable chips that insert data references into the editor. The available chips depend on the context:

Chart labels (single dimension)

Chart labels (multiple dimensions)

Axis labels

Legend labels

Geo map labels

Tooltip — item hover

Tooltip — axis hover (multi-series)

Use the dropdowns to select a picta (chart series) and a data field, then insert:

Here x is the zero-based index of the chart series, and y is the zero-based index of the data field.

Inserting Styles

If you have defined any rich text styles (see the Styles tab), the Insert Style section shows a chip for each style:

styleName → inserts  {styleName|..}

Place your cursor where the styled text should go, type or paste the content over the .. placeholders.

Inserting HTML / Line Breaks

For tooltips (full HTML support)

For styled inserts, replace the .. placeholders with your content.

For labels (plain text)

Explanation Tab

The Explanation tab contains reference material and examples to help you build format strings.

Examples by Context

Each chart context has its own set of examples showing common patterns:

Chart labels (single dimension)

Show the name of the item
  {item.name}

Show the value of the item
  {item.value}

Show the name and value of the item with text
  The {item.name} is {item.value}

Chart labels (multiple dimensions)

Show the value from the first field
  {1}

Show text and the value from the first field
  Value: {1}

Combine data from the first and third field with text
  The {1} is {3} meters

Axis labels

Show the item value
  {item}

Show the item value multiplied by 2 with leading text
  Double: {item * 2}

Show the item value rounded to two decimals
  {round(item * 100) / 100}

Show the item value formatted as a currency with two trailing zeros
  {item + (item % 1 == 0 ? ".00" : (item * 10) % 1 == 0 ? "0" : "" )}

Legend labels

Show the item value
  {item}

Show the item value with trailing text
  {item} legend

Geo map labels

Show the name of the item
  {item.name}

Show the name with text
  The name is: {item.name}

Tooltip — item hover

<b>Title: </b>{3}
<br/>
<b>Date: </b>{6}

Tooltip — axis hover (multi-series)

<table>
  <tr>
    <th>{item[0].data[0]}</th>
  </tr>
  <tr>
    <td width="20">{item[0].marker}</td>
    <td width="110">{item[0].dimensionNames[1]}</td>
    <td width="70">{item[0].data[1]} visits</td>
  </tr>
  <tr>
    <td>{item[1].marker}</td>
    <td>{item[1].dimensionNames[2]}</td>
    <td>{item[1].data[2]} visits</td>
  </tr>
  ... more rows if more items at this axis position
</table>

Colors Reference

Operators Reference

Functions Reference

Debugging

If your format string does not work as expected, use {print(item)} inside an expression to output the current value to the browser console.

• Open the console with F12 or Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac)
• For chart and axis labels: output appears immediately
• For tooltips: hover over chart elements to trigger the output

Note: {1}, {2}, etc. are shorthands for {item.data[0]}, {item.data[1]}, and so on. The index is zero-based when using the item.data syntax.

Styles Tab

The Styles tab lets you define reusable rich text styles that can be applied to parts of your format string using the {styleName|content} syntax.

Managing Styles

• List — all defined styles are shown as buttons
• Add — click Add Text Style to create a new style (named style_1, style_2, etc.)
• Select — click a style to view and edit its properties
• Remove — click Remove this style to delete the selected style

Live Preview

• Type any text in the Preview text field
• A rendered preview image updates automatically, showing how text would look with the selected style applied

Customization Options

Images Tab

The Images tab lets you add images (uploaded, emojis, brand logos, or country flags) that can be referenced in your format string using the {imageName} syntax.

Adding Images

Image size warning: If your uploaded image exceeds 100 KB, a warning appears suggesting you resize it for optimal performance.

Managing Images

• List — all images are shown as buttons
• Select — click an image to view its preview and properties
• Remove — click Remove this image to delete the selected image
• Remove all — click Remove all images to delete every image at once

Customization Options

Preview

The preview area shows the selected image along with its:

• File size (formatted in KB/MB)
• Dimensions (width × height in pixels, for non-SVG images)