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.

Drawing on fills

Normally, annotation/drawing fill is part of it and will react on click/drags, which makes it impossible to draw other annotations on top.

E.g. if we draw a rectangle, we can't draw a doodle inside it.

Should we want to have such capability, we need to disable interactivity of drawings' fills.

This can be done by implementing a custom theme:

const myTheme = am5.Theme.new(root);

myTheme.this.rule("Graphics", ["series", "fill", "drawing"]).setAll({
  forceInactive: true
});

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);
var myTheme = am5.Theme.new(root);

myTheme.this.rule("Graphics", ["series", "fill", "drawing"]).setAll({
  forceInactive: true
});

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);

Or, if we'd like to target only specific drawing tools only:

const myTheme = am5.Theme.new(root);

myTheme.this.rule("Graphics", ["series", "parallelchannel", "fill", "drawing"]).setAll({
  forceInactive: true
});

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);
var myTheme = am5.Theme.new(root);

myTheme.this.rule("Graphics", ["series", "parallelchannel", "fill", "drawing"]).setAll({
  forceInactive: true
});

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);

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.