Drawing control

Drawing control allows using a number of tools to dynamically add annotations to the chart. They can be as simple as a rectangle or a free-draw doodle, or as complex as a Fibonacci indicator.

Prerequisites

Some of the drawing tools can be used on any chart.

Some will require main series to be set on the chart, while other will require main volume series, too.

Adding

Like any other control, it should be instantiated using new() syntax, and pushed into toolbar's controls list:

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

Configuring

Tool list

By default, the tool selector in drawing mode will show all available drawing tools.

We can change that using drawing control's setting tools.

It accepts an array of tool names, with default being this:

[
  "Average",
  "Callout",
  "Doodle",
  "Ellipse",
  "Fibonacci",
  "Fibonacci Timezone",
  "Horizontal Line",
  "Horizontal Ray",
  "Arrows & Icons",
  "Label",
  "Line",
  "Polyline",
  "Quadrant Line",
  "Rectangle",
  "Regression",
  "Trend Line",
  "Vertical Line"
]

The following will limit drawing tools to "Doodle", "Line", and "Rectangle":

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

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

Colors

Color pickers used by drawing control use a pre-defined default list of colors:

We can override the list using drawing control's colors setting, which accepts an ColorSet object.

let toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DrawingControl.new(root, {
      stockChart: stockChart,
      colors: ColorSet.new(this._root, {
        colors: [
          color(0x000000),
          color(0x464e56),
          color(0x5b636a),
          color(0x767d84),
          color(0xb9bdc5),
          color(0xe0e4e9),
          color(0xf7f8ff),
          color(0xffffff),
        ]
      })
    })
  ]
});

var toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DrawingControl.new(root, {
      stockChart: stockChart,
      colors: ColorSet.new(this._root, {
        colors: [
          color(0x000000),
          color(0x464e56),
          color(0x5b636a),
          color(0x767d84),
          color(0xb9bdc5),
          color(0xe0e4e9),
          color(0xf7f8ff),
          color(0xffffff),
        ]
      })
    })
  ]
});

Other settings

Please refer to drawing control's setting reference for a complete list of its configuration options.