React ChartsFinancial Charts - Toolbar

The Toolbar contains tools that allow users to analyse and annotate the charts.

Chart Type Selection

Users can choose the series type used to display the price data.

Available series types are Candlestick, Hollow Candlestick, OHLC, Line, Step Line, HLC and High Low.

Lines

Line types available are:

• Trend Line: A single line between two points on the chart.
• 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.
• 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.

Stroke and fill colours, stroke width and line style are fully customisable by the user.

Line and Channel Labels

Users can add labels to their lines using the options available from the 'Settings' button or by double-clicking a line or channel. These options allow styling and positioning the labels.

Extending Lines and Channels

Users can extend one or both ends of lines and channels to infinity. This is done using the options available from the 'Settings' button or by double-clicking a line or channel.

Annotations

Annotation types available are:

• Text: Simple text string displayed on the chart.
• Comment: Text within a comment box.
• Callout: Text within a box, with a callout arrow anchored to a specific position on the chart.
• Note: An icon on the chart, with text displayed on hover.

Add a new line within annotations by pressing ⇧ Shift+↵ Enter.

Arrows

Arrow types available are:

• Arrow: An arrow extending between two points on the chart.
• Arrow Up: A fixed size up arrow in a specific position on the chart.
• Arrow Down: A fixed size down arrow in a specific position on the chart.

Measuring Tools

Measuring Tools available are:

• Measure: A quick measuring tool, which measures both the date and price range. This is removed when the user clicks away on the chart.
• Date Range: Measures the time difference and number of bars between two points on the chart. Also shows the sum of the volume between the the two points if volume is enabled.
• Price Range: Measures the price difference between two points on the chart. This is displayed both as an absolute value and as a percentage.
• Date and Price: Combines both the Date and Price Range measures.

Keyboard Shortcuts

The following keyboard shortcuts can be used with Financial Charts.

• ^ 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 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',
                strokeWidth: 4,
            },
        },
      },
    },
  },