Javascript ChartsFinancial Charts - Annotations

Users can add various annotations to the chart for enhanced data analysis.

User Annotations

When annotations are enabled, users have the ability to create, edit and delete their own annotations via the intuitive toolbar buttons.

In the above example:

• Add annotations by clicking the toolbar and then clicking and dragging on the chart area, or by clicking the '+' button next to the axes.
• Click and drag an annotation to move it.
• Change the colour of the selected annotation by clicking the 'pencil' icon in the floating toolbar and using the colour picker. The new colour will be used for any subsequently created annotations.
• Remove a single annotation by pressing the 'delete' button in the floating toolbar or clear all annotations with the 'clear' button in the annotations toolbar.

Annotation Types

• Trend Line: A single line between two points on the chart.
• Parallel Channel: Two parallel lines, with a fill between them and an optional centre line as well.
• Disjoint Channel: Two lines which do not need to be parallel, with a fill between them.
• Horizontal Line: A horizontal line across the entire chart. There is also an optional label over the axis.
• Vertical Line: A vertical line across the entire chart. There is also an optional label over the axis.

Save & Restore

function saveAnnotations() {
    const newState = chart.getState();
    //save to database...
}

function restoreAnnotations() {
    // retrieve state from database...
    chart.setState(state);
}

In the above example:

• Create and edit some annotations, and then click 'Save' to store the annotation state.
• Click the 'Restore' button to restore a saved state to the chart. This will override any currently displayed annotations.

Initial State

The initialState property allows creating a chart with a saved annotation state. Additionally, mutating this option at runtime will update the displayed annotations.

The object provided to this property should be the same as the object returned from the getState() method.

initialState: {
    annotations: [
        {
            type: 'line',
            start: {
                x: { __type: 'date', value: '2024-03-21' },
                y: 1234,
            },
            end: {
                x: { __type: 'date', value: '2024-06-21' },
                y: 2345,
            }
        },
    ],
}

Customisation

To customise the look of 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,
            },
          },
        },
      },
    },
  },

API Reference