Stock annotations

Stock chart can be annotated using a vast array of tools ranging from simple shapes and doodles, to complex calculated indicators.

Enabling UI

To enable annotation user interface, we need to add a drawing control to the stock toolbar.

let toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DrawingControl.new(root, {
      stockChart: stockChart
    })
  ]
});

var toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DrawingControl.new(root, {
      stockChart: stockChart
    })
  ]
});

See the Pen
Stock chart controls by amCharts team (@amcharts)
on CodePen.0

Removing annotations

Eraser tool

Once chart is in drawing mode - when user clicks drawing control - they can select an eraser tool from the drawing menu.

When eraser tool is selected, clicking on any annotation will remove it.

Reset control

If the toolbar contains a reset control, it can be clicked to automatically remove all annotations from the chart.

Serializing annotations

At this moment serializing and restoring annotations is not yet supported.

The functionality is under development and will be available soon, at which point this section will be updated.