DrawingControl

Type class

A StockToolbar control that turns drawing mode on, with a row of controls for picking the tool and its colors, lines and fonts.

More info: Drawing control

Sources

DrawingControl can be used (imported) via one of the following packages.

TypeScript

// Import DrawingControl
import * as am5stock from "@amcharts/amcharts5/stock";

// Create DrawingControl
am5stock.DrawingControl.new(root, {
  // ... config if applicable
});

JavaScript

<!-- Load DrawingControl -->
<script src="stock.js"></script>

<script>
// Create DrawingControl
am5stock.DrawingControl.new(root, {
  // ... config if applicable
});
</script>

Inheritance

DrawingControl extends StockControl.

DrawingControl is not extended by any other symbol.

Settings

Set these settings on a DrawingControl object using its set() and setAll() methods. Read about settings concept.

#colors

Type ColorSet

Colors to offer in the color pickers.

More info: Drawing control: colors

#drawingIcon

Type IIcon

Icon that the icon tool draws.

#drawingIcons

Type IIcon[]

Icons to choose from for the icon tool.

#fillColor

Type Color

Fill color of new drawings.

#fillOpacity

Type undefined | number

Fill opacity of new drawings, from 0 to 1.

#labelFill

Type Color

Text color of new labels and callouts.

#labelFontFamilies

Type string[]

Font families to choose from.

#labelFontFamily

Type undefined | string

Font family of new labels and callouts.

"inherit" uses the computed font of the chart's container (since 5.17.3).

#labelFontSize

Type number | string | undefined

Font size of new labels and callouts.

#labelFontSizes

Type Array

Font sizes to choose from.

#labelFontStyle

Type "normal" | "italic" | "oblique"

Font style of new labels and callouts.

#labelFontWeight

Type "normal" | "bold" | "bolder" | "lighter" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"

Font weight of new labels and callouts.

#scrollable

Type undefined | false | trueSince 5.9.5

Limits the tool list's height to the chart's height minus 100 pixels, scrolling the rest.

#series

Type XYSeries[]

Series to attach drawings to. Each panel's main series (stockSeries on its panel, the first series on others) is added automatically.

#showExtension

Type undefined | false | trueDefault true

Extends new lines with a dotted line beyond both ends.

#snapToData

Type undefined | false | trueDefault false

Snaps the points of new drawings to the values of the nearest data items.

#strokeColor

Type Color

Line color of new drawings; changing it also restyles the selected ones.

#strokeDasharray

Type number[]

Dash pattern of new drawings' lines, such as [2, 2], or [] for a solid line.

#strokeDasharrays

Type number[][]

Dash patterns to choose from.

#strokeOpacity

Type undefined | number

Line opacity of new drawings, from 0 to 1.

#strokeWidth

Type undefined | number

Line width of new drawings, in pixels.

#strokeWidths

Type number[]

Line widths to choose from, in pixels.

#tool

Type DrawingToolsDefault "Line"

The tool in use; the one set at the start is the default.

#tools

Type DrawingTools[]

Tools to list in the tool dropdown.

More info: Drawing control: tool list

#toolSettings

Type undefined | objectSince 5.5.2

Settings for the drawing series of each tool, keyed by tool name.

More info: Drawing control: tool settings

18 inherited items

#active

Type undefined | false | trueDefault falseInherited from IStockControlSettings

Turns the control on; its button shows as active.

#align

Type "left" | "right"Default "left"Inherited from IStockControlSettings

Side of the toolbar the control is placed on.

#animations

Type ArrayInherited from IEntitySettingsSince 5.20.8

Animations the element plays on its own, described as data - so they can be set from a JSON config and saved with it.

Each one animates a setting of the element (or, with target: "dataItem", a value of its data item - a map point's positionOnLine, say). They start when the setting is applied, restart when it changes, and stop when the element is disposed. A saved config keeps what was configured, never a value caught half way through an animation.

sprite.set("animations", [
  { key: "rotation", to: 360, duration: 4000, loops: 0 },
  { key: "scale", from: 1, to: 1.3, duration: 800, loops: 0, yoyo: true, easing: "sine" }
]);

#description

Type undefined | stringInherited from IStockControlSettings

What the control does, shown as the button's tooltip. Falls back to name.

#forceHidden

Type undefined | false | trueDefault falseInherited from IStockControlSettingsSince 5.8.5

Keeps the control hidden, even when show() is called.

#icon

Type HTMLElement | SVGElement | "none"Inherited from IStockControlSettings

Icon element of the button, or "none" for no icon. Each control has its own default icon.

#id

Type undefined | stringInherited from IEntitySettings

A unique ID for looking the element up in root.entitiesById. Setting an ID that another element already has throws an error.

#ignoreThemes

Type undefined | false | trueDefault falseInherited from IEntitySettingsSince 5.15.6

Ignores themes: no theme rule applies to the element, not even one of the default theme.

#name

Type undefined | stringInherited from IStockControlSettings

Label text of the control's button.

#stateAnimationDuration

Type undefined | numberDefault 0Inherited from IEntitySettings

How long, in milliseconds, a switch from one state to another animates.

0 switches at once.

#stateAnimationEasing

Type $ease.EasingDefault out(cubic)Inherited from IEntitySettings

Easing of the animated switch from one state to another.

#stockChart

Type StockChartInherited from IStockControlSettings

The StockChart the control acts on.

#themes

Type ArrayInherited from IEntitySettings

Themes applied to the element and everything inside it.

#themeTags

Type ArrayInherited from IEntitySettings

Tags that theme rules can target. They also count for the element's children, so a rule can match a child by a tag of its parent.

More info: Themes

#themeTagsSelf

Type ArrayInherited from IEntitySettings

Tags that theme rules can target, like themeTags, but only for this element, not its children.

More info: Themes

#togglable

Type undefined | false | trueDefault trueInherited from IStockControlSettings

A click on the button toggles active.

#userData

Type anyInherited from IEntitySettings

Any data of your own to keep with the element.

#visible

Type undefined | false | trueDefault trueInherited from IStockControlSettings

Shows the control's button; false hides it.

Private settings

These are read-only settings accessible from a DrawingControl object using its getPrivate() method. Read about private settings.

#boldControl

Read onlyType StockControl

#clearControl

Read onlyType StockControl

#eraserControl

Read onlyType StockControl

#extensionControl

Read onlyType StockControl

#fillControl

Read onlyType ColorControl

#iconControl

Read onlyType IconControl

#italicControl

Read onlyType StockControl

#labelFillControl

Read onlyType ColorControl

#labelFontFamilyControl

Read onlyType DropdownListControl

#labelFontSizeControl

Read onlyType DropdownListControl

#selectControl

Read onlyType StockControlSince 5.9.1

The control that turns drawing selection on and off.

#snapControl

Read onlyType StockControl

#strokeControl

Read onlyType ColorControl

#strokeDasharrayControl

Read onlyType DropdownListControl

#strokeWidthControl

Read onlyType DropdownListControl

#toolControl

Read onlyType DrawingToolControl

#toolsContainer

Read onlyType HTMLDivElement

#toolTemplates

Read onlyType undefined | object

4 inherited items

#button

Read onlyType HTMLDivElementInherited from IStockControlPrivate

#icon

Read onlyType HTMLElementInherited from IStockControlPrivate

#label

Read onlyType HTMLDivElementInherited from IStockControlPrivate

#toolbar

Read onlyType StockToolbarInherited from IStockControlPrivate

Properties

#className

StaticType stringDefault "DrawingControl"

#classNames

StaticType ArrayDefault StockControl.classNames.concat([DrawingControl.className])

#drawingSeries

Type objectSince 5.8.0

The drawing series of each tool, keyed by tool name.

7 inherited items

#adapters

Type AdaptersDefault new Adapters(this)Inherited from Entity

#enableDispose

Type booleanDefault trueInherited from Settings

Set to false to make dispose() do nothing.

#events

Type EventDispatcherDefault this._createEvents()Inherited from Entity

#root

Type RootInherited from EntitySince 5.0.6

The Root the object belongs to.

#states

Type StatesDefault new States(this)Inherited from Entity

#template

Type Template | undefinedInherited from Entity

A Template applied to the object. Its settings apply where the object has none set of its own.

#uid

Type numberDefault ++counterInherited from Settings

A unique number, given to each object as it is created.

Methods

#addLine(tool: "Horizontal Line" | "Horizontal Ray" | "Vertical Line",
panel: StockPanel,
point: IPoint)

Returns voidSince 5.10.2

Adds a horizontal line, horizontal ray or vertical line drawing through a point, without the pointer.

#clearDrawings()

Returns voidSince 5.3.9

Deletes all drawings made with the control's tools.

#serializeDrawings(output: "object" | "string",
indent?: undefined | string)

Returns Array | stringSince 5.3.0

Serializes all drawings of the chart into an array of objects (output: "object") or into JSON ("string", the default).

More info: Serializing indicators and annotations

#setEraser(active: boolean)

Returns voidSince 5.3.9

Turns erasing on or off: while on, a click on a drawing deletes it.

#unserializeDrawings(data: string | Array)

Returns voidSince 5.3.0

Adds drawings to the chart from data made by serializeDrawings().

More info: Serializing indicators and annotations

25 inherited items

#animate(options: AnimationOptions)

Returns AnimationInherited from Settings

Animates a setting from its current value (or from) to to. The setting jumps to from at once. With duration 0, or no value to start from, it is set to to at once and the returned animation is already stopped.

More info: Animations: animating settings

#dispose()

Returns voidInherited from Settings

Disposes the object, freeing everything it holds. A disposed object can't be used again.

#get(key: Key,
fallback: F)

Returns NonNullable | FInherited from Entity

Returns the value of setting key, run through any adapters, or fallback if it is not set.

More info: Settings

#has(key: Key)

Returns booleanInherited from Settings

Returns true if setting key is set.

More info: Settings

#hide()

Returns voidInherited from StockControl

Hides the control's button.

#isAccessible()

Returns booleanInherited from StockControl

#isDisposed()

Returns booleanInherited from Settings

Returns true if the object has been disposed.

#isType(type: string)

Returns thisInherited from Entity

Returns true if the object is of class type or extends it.

#new(root: Root,
settings: ITSettings,
template?: Template)

StaticReturns TInherited from Entity

Creates an instance of the class. Use it instead of new Class().

More info: Getting started: new element syntax

#off(key: Key,
callback?: undefined | (value: [""], target: this, key: Key) => void)

Returns voidInherited from SettingsSince 5.9.2

Removes a callback added with on(). Without callback, removes all of them for key.

More info: Events: settings value change

#offDebounced(key: Key,
callback?: undefined | (value: [""], target: this, key: Key) => void)

Returns voidInherited from Settings

Removes a callback added with onDebounced(). Without callback, removes all of them for key.

More info: Events: settings value change

#offDebouncedPrivate(key: Key,
callback?: undefined | (value: [""], target: this, key: Key) => void)

Returns voidInherited from Settings

Removes a callback added with onPrivateDebounced(). Without callback, removes all of them for key.

More info: Events: settings value change

#offPrivate(key: Key,
callback?: undefined | (value: [""], target: this, key: Key) => void)

Returns voidInherited from SettingsSince 5.9.2

Removes a callback added with onPrivate(). Without callback, removes all of them for key.

More info: Events: settings value change

#on(key: Key,
callback: (value: [""], target: this, key: Key) => void)

Returns IDisposerInherited from Settings

Calls callback each time the value of setting key changes or is removed. Setting the same value again does not call it.

More info: Events: settings value change

#once(key: Key,
callback: (value: [""], target: this, key: Key) => void)

Returns IDisposerInherited from SettingsSince 5.20.4

Like on(), but the callback is removed after it is called once.

More info: Events: settings value change

#onceDebounced(key: Key,
callback: (value: [""], target: this, key: Key) => void,
debounceDelay: number)

Returns IDisposerInherited from SettingsSince 5.20.4

Like onDebounced(), but the callback is removed after it is called once.

More info: Events: settings value change

#onDebounced(key: Key,
callback: (value: [""], target: this, key: Key) => void,
debounceDelay: number)

Returns IDisposerInherited from Settings

Like on(), but waits until setting key has not changed for debounceDelay milliseconds, then calls callback once with the latest value.

More info: Events: settings value change

#onPrivate(key: Key,
callback: (value: [""], target: this, key: Key) => void)

Returns IDisposerInherited from Settings

Calls callback each time the value of private setting key changes.

More info: Events: settings value change

#onPrivateDebounced(key: Key,
callback: (value: [""], target: this, key: Key) => void,
debounceDelay: number)

Returns IDisposerInherited from Settings

Like onPrivate(), but waits until private setting key has not changed for debounceDelay milliseconds, then calls callback once with the latest value.

More info: Events: settings value change

#remove(key: Key)

Returns voidInherited from Entity

Removes the value set for setting key. The setting goes back to the value from a theme or template, if one has it.

More info: Settings

#removeAll()

Returns voidInherited from Settings

Removes all settings, as remove() does for each one.

More info: Settings

#set(key: Key,
value: Value)

Returns ValueInherited from Entity

Sets setting key to value and returns value. A value set this way overrides themes and templates, and stops any animation of the setting.

More info: Settings

#setAll(settings: Partial)

Returns voidInherited from Settings

Sets several settings at once, from an object of key-value pairs.

More info: Settings

#setTimeout(fn: () => void,
delay: number)

Returns IDisposerInherited from Entity

Calls fn after delay milliseconds, unless the object is disposed first. Disposing the returned disposer cancels it.

#show()

Returns voidInherited from StockControl

Shows the control's button, unless forceHidden is set.

Events

Add event handlers to DrawingControl object using its events.on() method. Read about adding event handlers.

1 inherited item

#click

Param { type: "click", target: DrawingControl, originalEvent: IPointerEvent }Inherited from IStockControlEvents

The control's button was clicked.