Callouts

Callouts are arrow annotations that help you label and draw attention to specific points or regions in your ternary plot. Each callout consists of an arrow pointing to a target location and a text label.

There are two ways to add callouts to your plot:

Click the Interaction button in the toolbar
Select Add Callout from the menu
Click on the plot to select where the arrow should point (the target)
- Click on a data point to anchor the arrow to that point
- Click anywhere else to anchor the arrow to specific ternary coordinates
Click again to place the label position
- You can place the label anywhere, including outside the triangle
The callout is created and the interaction mode automatically turns off

You can also add callouts manually in the callouts table by entering the required values:

Target coordinates (A, B, C) or point ID
Label position (X, Y coordinates in the SVG coordinate system)
Text content
Styling properties

Once created, callouts can be easily modified:

Hover over the callout to reveal the interactive handles
Click and drag the label box to reposition it

Hover over the callout to reveal a blue circle at the arrow tip
Click and drag the blue circle to move where the arrow points

Double-click the label to enter edit mode
Type your new text
Press Enter or click the checkmark button to save
Press Escape to cancel editing

Hover over the callout to reveal the delete button (trash icon)
Click the trash icon to remove the callout

Callouts can target either a specific data point or arbitrary coordinates:

When targeting a point, the callout arrow will automatically follow that point even if you modify the point's coordinates in the data table. This is useful for labeling specific data points that might move.

When targeting coordinates, the arrow points to a fixed position in ternary space defined by A, B, and C values. This is useful for labeling regions or features that aren't tied to specific data points.

The label text that appears next to the arrow. This can be any string, including:

Point labels and identifiers
Descriptive annotations
Chemical formulas or compositions
Notes and explanations

The X and Y coordinates determine where the text label appears in the plot. These are in SVG coordinate space:

X: Horizontal position (increases to the right)
Y: Vertical position (increases downward)

You can position labels anywhere on the canvas, including outside the triangle boundaries.

The size of the label text in pixels. Default is 12.

The minimum font size is 8 and the maximum is 48.

The font style can be set to either "normal" (default) or "italic". Normal displays text in the standard upright style, while italic shows text in a slanted style commonly used for emphasis.

The color of the label text. See Color.

The color of the arrow line and arrowhead. See Color.

The thickness of the arrow line in pixels. Default is 2.

The minimum width is 1 and the maximum is 10.

Choose between:

Solid: A continuous line (default)
Dashed: A dashed line pattern

Controls the curvature of the arrow path. A value of 0 creates a straight arrow, while positive or negative values create curved arrows that bow left or right.

The distance in pixels between the label and the start of the arrow line. This creates space between the text and the arrow.

The distance in pixels between the arrow tip and the target point. Default is 8 pixels, which provides a small gap between the arrowhead and the target.

Controls the transparency of both the label text and arrow. See Opacity.

Hover interaction: Hover over any part of a callout (arrow, label, or target) to reveal the editing controls
Precise positioning: Use the crosshair interaction mode to find exact coordinates before creating a callout
Label placement: Labels can be positioned outside the triangle for cleaner annotations
Multiple callouts: You can create multiple callouts to annotate different features in your plot
Keyboard shortcuts: Press Escape to cancel callout creation or editing at any time