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|..}

Click the style chip to insert a style token into the editor (or type it manually). Then replace the .. placeholder with the content you want to format. The .. can contain plain text, data field references, or both:

• Plain text — {styleName|Hello} applies the style to "Hello"
• Data field — {blue|{1}} applies the blue style to data field 1
• Data + text — {bigRed|Value: }{bigRed|{1}} combines text and a data field using two separate style blocks
• Expression — {smallGray|{round(item * 100) / 100}} styles a computed expression

Examples by context

Chart labels (single dimension)

Apply a style named bigRed to the value:
  {bigRed|{item.value}}

Apply a style to text and value together:
  {bigRed|Visitors: {item.value}}

Chart labels (multiple dimensions)

Apply a style named blue to data field 1:
  {blue|{1}}

Apply a style to text and a data field (use two separate style blocks):
  {bigRed|Revenue: }{bigRed|{1}} million

Axis labels

Apply a style named green to the formatted axis value:
  {green|{round(item)}}

Tooltip — item hover

Apply a style named highlight to a data field:
  {highlight|{3}}

Inserting Images

If you have added any images (see the Images tab), the Insert Image section appears below Insert Style and shows a chip for each image:

imageName → inserts  {imageName|}

Click the image chip to insert an image token into the editor (or type it manually). Note there are no .. placeholders — the vertical pipe is still required, but there is nothing between the pipe and the closing brace because an image cannot style text.

Using images with fixed values

If you insert a fixed image (like an emoji or a specific flag), it displays the same image for every item:

{grinning_face|}

Using images with data fields (flags and brand logos)

When you add country flags or brand logos, the image names typically include the ISO 2-letter country code or brand name (e.g. flag_es, flag_it, flag_fr or brand_github, brand_google). If your data table contains matching ISO codes or brand names, you can reference a data field instead of a fixed name:

{flag_3|}

Here 3 is the data field index containing ISO 2-letter country codes. For each item, DataPicta looks up the value in field 3 (e.g. es, it, fr) and displays the corresponding flag image.

The same works for brand logos:

{brand_4|}

Here 4 is the data field index containing brand names (e.g. github, google), and the matching brand logo is shown for each item.

This way a single image token automatically resolves to the correct image for every item in your chart.

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 (see Inserting Images).

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)