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 Color
Set 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.
Standalone usage / API
Instantiating object
We can use drawing control's drawing functionality without adding it to a stock toolbar or even without toolbar at all.
We'll just need to instantiate a standalone object of the DrawingControl
class.
let drawingControl = am5stock.DrawingControl.new(root, { stockChart: stockChart });
var drawingControl = am5stock.DrawingControl.new(root, { stockChart: stockChart });
Enabling draw mode
To turn on the drawing mode we need to:
- Set
active
setting totrue
. - Set
tool
setting to whatever tool we want it to use. - Optionally, set any additional settings like
strokeColor
, etc.
The following code will turn drawing mode on, and will select a "Doodle" tool with red color:
drawingControl.setAll({ active: true, tool: "Doodle", strokeColor: am5.color(0xff0000) });
drawingControl.setAll({ active: true, tool: "Doodle", strokeColor: am5.color(0xff0000) });
Available tools
"Average"
"Callout"
"Doodle"
"Ellipse"
"Fibonacci"
"Fibonacci Timezone"
"Horizontal Line"
"Horizontal Ray"
"Arrows & Icons"
"Label"
"Line"
"Polyline"
"Quadrant Line"
"Rectangle"
"Regression"
"Trend Line"
"Vertical Line"
Available settings
Please refer to the class reference of the DrawinControl
for a complete list of available settings.
Exiting draw mode
To exit the draw mode, simply set active: false
on your drawing control object:
drawingControl.set("active", false);
drawingControl.set("active", false);
Clearing drawings
Use use clearDrawings()
to clear all drawings.
drawingControl.clearDrawings();
drawingControl.clearDrawings();
Toggling eraser
To toggle eraser on and off use setEraser(true | false)
.
drawingControl.setEraser(true);
drawingControl.setEraser(true);
Example
See the Pen
Stock Chart by amCharts team (@amcharts)
on CodePen.0