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