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.