JavaScript ChartsAnnotations

To improve data analysis, a range of annotations can be added to Cartesian charts. These annotations are especially useful for highlighting trends and key data points.

In the example above:

• Select annotations from the toolbar and click on the series area to add them.
• Use the floating options toolbar to adjust the position, colour, or style.
• Add labels or extend lines using the options available from the 'Settings' button.
• Delete annotations via the main toolbar (to delete all), or the floating toolbar (to delete individually).

Annotation Types

A subset of annotation types is available across all Cartesian charts, including:

• Text Annotations: text, comment, callout and note.
• Lines: line, horizontal-line and vertical-line.
  For charts with a vertical Number Axes, the parallel-channel and disjoint-channel are also available.
• Arrows: arrow, arrow-up and arrow-down.

For more details about these, and for the full set of annotations, see Financial Charts.

Toolbar

The Annotations Toolbar offers menu options for annotating charts. By default, the toolbar is enabled, but it can be disabled by setting toolbar.enabled to false.

The menu items in the toolbar can be customised by configuring the toolbar.buttons options array.

annotations: {
    toolbar: {
        buttons: [
            {
                icon: 'delete',
                value: 'clear',
            },
            {
                icon: 'text-annotation',
                value: 'text-menu',
            },
        ],
    },
},

In the above example:

• Only the Text Annotations and Delete button are available.
• The order of these is switched.

Keyboard Shortcuts

The following keyboard shortcuts can be used.

• ^ Ctrl+Z / ⌘+Z will undo any drawing and annotation actions.
• ^ Ctrl+Y / ⌘+Y will redo any undo actions.
• ^ Ctrl+C / ⌘+C will copy the selected drawing or annotation.
• ^ Ctrl+V / ⌘+V will paste the copied drawing or annotation.
• Delete or ⌫ Backspace will delete the selected item.
• Arrow keys (← ↑ → ↓) will move the selected drawing or annotation by 1 pixel.
  Use in combination with ^ Ctrl or ⇧ Shift to move by 10 pixels.
• Holding down ⇧ Shift whilst creating a drawing or dragging a handle will snap it to the nearest 45° angle.

Save & Restore

Drawings and Annotations can be saved, restored and programmatically initialised and modified, using the Chart State API.

Customisation

To customise the initial look of Drawings and Annotations, use Theme Override Options.

  theme: {
    overrides: {
      common: {
        annotations: {
          line: {
            stroke: "lime",
            strokeWidth: 3,
            lineDash: [3, 4],
          },
          "parallel-channel": {
            stroke: "red",
            strokeWidth: 4,
            background: {
              fill: "red",
            },
            middle: {
              strokeOpacity: 0,
            },
          },
          comment: {
            fill: "orange",
            color: "blue",
            stroke: "blue",
            strokeWidth: 2,
          },
        },
      },
    },
  },

API Reference