DrawingControl – amCharts 5 Documentation

Type class

A drawing tools control for StockChart.

Sources

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

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

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

<!-- 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.

active #	Type `undefined` \| `false` \| `true` Default `false` Inherited from `IStockControlSettings` Indicates if control is active.
align #	Type `"left"` \| `"right"` Default `"left"` Inherited from `IStockControlSettings` Alignment of the control in a toolbar.
colors #	Type `ColorSet` Colors to show in color pickers. Click here for more info
description #	Type `undefined` \| `string` Inherited from `IStockControlSettings` Description of what the button does.
drawingIcon #	Type `IIcon`
drawingIcons #	Type `IIcon[]`
fillColor #	Type `Color` Default fill color.
fillOpacity #	Type `undefined` \| `number` Default fill opacity.
forceHidden #	Type `undefined` \| `false` \| `true` Inherited from `IStockControlSettings` Force this control to always be invisible. @since 5.8.5 @defaul false
icon #	Type `HTMLElement` \| `SVGElement` \| `"none"` Inherited from `IStockControlSettings` An element with control icon. If not set, each control will aytomatically create an icon.
id #	Type `undefined` \| `string` Inherited from `IEntitySettings` A custom string ID for the element. If set, element can be looked up via `am5.registry.entitiesById`. Will raise error if an element with the same ID already exists.
labelFill #	Type `Color` Default color for labels.
labelFontFamilies #	Type `string[]` Available fonts for user to choose from.
labelFontFamily #	Type `undefined` \| `string` Default label font.
labelFontSize #	Type `number` \| `string` \| `undefined` Default label font size.
labelFontSizes #	Type `Array` Available font sizes.
labelFontStyle #	Type `"normal"` \| `"italic"` \| `"oblique"` Default label style.
labelFontWeight #	Type `"normal"` \| `"bold"` \| `"bolder"` \| `"lighter"` \| `"100"` \| `"200"` \| `"300"` \| `"400"` \| `"500"` \| `"600"` \| `"700"` \| `"800"` \| `"900"` Default label font weight.
name #	Type `undefined` \| `string` Inherited from `IStockControlSettings` Name of the control. Used for the label.
series #	Type `XYSeries[]` Target series for drawing.
showExtension #	Type `undefined` \| `false` \| `true` Default `true` Show dotted/thin line extending from both ends of the drawn line?
snapToData #	Type `undefined` \| `false` \| `true` Default `true` Should drawings snap to the nearest data point?
stateAnimationDuration #	Type `undefined` \| `number` Inherited from `IEntitySettings` Duration of transition from one state to another.
stateAnimationEasing #	Type `$ease.Easing` Inherited from `IEntitySettings` Easing of transition from one state to another.
stockChart #	Type `StockChart` Inherited from `IStockControlSettings` A `StockChart` the toolbar is for.
strokeColor #	Type `Color` Default color for lines/borders.
strokeDasharray #	Type `number[]` Default dasharray setting.
strokeDasharrays #	Type `number[]` Available line dash settings for user to choose from.
strokeOpacity #	Type `undefined` \| `number` Default line/border opacity.
strokeWidth #	Type `undefined` \| `number` Default line/border width in pixels.
strokeWidths #	Type `number[]` Available line widths for user to choose from.
themeTags #	Type `Array` Inherited from `IEntitySettings` Tags which can be used by the theme rules. Click here for more info
themeTagsSelf #	Type `Array` Inherited from `IEntitySettings` Tags which can be used by the theme rules. These tags only apply to this object, not any children. Click here for more info
themes #	Type `Array` Inherited from `IEntitySettings` A list of themes applied to the element.
togglable #	Type `undefined` \| `false` \| `true` Default `true` Inherited from `IStockControlSettings` If set to `true`, control can be toggle on and off by clicking on it.
tool #	Type `DrawingTools` Default tool.
toolSettings #	Type `undefined` \| `object` Default settings for drawing tools. @since 5.5.2 Click here for more info
tools #	Type `DrawingTools[]` List of tools available in drawing mode. Click here for more info
userData #	Type `any` Inherited from `IEntitySettings` A storage for any custom user data that needs to be associated with the element.
visible #	Type `undefined` \| `false` \| `true` Default `true` Inherited from `IStockControlSettings` Is control visible?
There are 16 inherited items currently hidden from this list.

Private settings

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

Read about private settings.

boldControl #	Read only Type `StockControl`
button #	Read only Type `HTMLDivElement` Inherited from `IStockControlPrivate`
clearControl #	Read only Type `StockControl`
eraserControl #	Read only Type `StockControl`
extensionControl #	Read only Type `StockControl`
fillControl #	Read only Type `ColorControl`
icon #	Read only Type `HTMLElement` Inherited from `IStockControlPrivate`
iconControl #	Read only Type `IconControl`
italicControl #	Read only Type `StockControl`
label #	Read only Type `HTMLDivElement` Inherited from `IStockControlPrivate`
labelFillControl #	Read only Type `ColorControl`
labelFontFamilyControl #	Read only Type `DropdownListControl`
labelFontSizeControl #	Read only Type `DropdownListControl`
selectControl #	Read only Type `StockControl` Selector mode toggler. @since 5.9.1
snapControl #	Read only Type `StockControl`
strokeControl #	Read only Type `ColorControl`
strokeDasharrayControl #	Read only Type `DropdownListControl`
strokeWidthControl #	Read only Type `DropdownListControl`
toolControl #	Read only Type `DrawingToolControl`
toolTemplates #	Read only Type `undefined` \| `object`
toolbar #	Read only Type `StockToolbar` Inherited from `IStockControlPrivate`
toolsContainer #	Read only Type `HTMLDivElement`
There are 4 inherited items currently hidden from this list.

Properties

adapters #	Type `Adapters` Default `new Adapters(this)` Inherited from `Entity`
className #	Static Type `string` Default `"DrawingControl"`
classNames #	Static Type `Array` Default `"DrawingControl", "StockControl", "Entity"`
drawingSeries #	Type `object` Returns an object that holds all drawing series, arrange by tool (key). @since 5.8.0 @readonly
events #	Type `EventDispatcher` Default `this._createEvents()` Inherited from `Entity`
root #	Type `Root` Inherited from `Entity` An instance of `Root` object. @readonly @since 5.0.6
states #	Type `States` Default `new States(this)` Inherited from `Entity`
template #	Type `Template` \| `undefined` Inherited from `Entity` @todo needs description
uid #	Type `number` Default `++counter` Inherited from `Settings` Unique ID.
There are 6 inherited items currently hidden from this list.

Methods

animate( options: `AnimationOptions` ) #	Returns `Animation` Inherited from `Settings` Animates setting values from current/start values to new ones. Click here for more info
clearDrawings() #	Returns `void` Clears all drawings. @since 5.3.9
dispose() #	Returns `void` Inherited from `Settings` Disposes this object.
get( key: `Key`, fallback: `F` ) #	Returns `NonNullable` \| `F` Inherited from `Entity` Returns settings value for the specified `key`. If there is no value, `fallback` is returned instead (if set). Click here for more info
has( key: `Key` ) #	Returns `boolean` Inherited from `Settings` Returns `true` if the setting exists. Click here for more info
hide() #	Returns `void` Inherited from `StockControl`
isAccessible() #	Returns `boolean` Inherited from `StockControl`
isDisposed() #	Returns `boolean` Inherited from `Settings` Returns `true` if this element is disposed.
isType( type: `string` ) #	Returns `this` Inherited from `Entity` Checks if element is of certain class (or inherits one).
new( root: `Root`, settings: `ITSettings`, template?: `Template` ) #	Static Returns `T` Inherited from `Entity` Use this method to create an instance of this class. Click here for more info
off( key: `Key`, callback?: `undefined` \| ( value: `[""]`, target: `this`, key: `Key`) => `void` ) #	Returns `void` Inherited from `Settings` Removes a callback for when value of a setting changes. Click here for more info @since 5.9.2
offPrivate( key: `Key`, callback?: `undefined` \| ( value: `[""]`, target: `this`, key: `Key`) => `void` ) #	Returns `void` Inherited from `Settings` Removes a callback for when value of a private setting changes. Click here for more info @since 5.9.2
on( key: `Key`, callback: ( value: `[""]`, target: `this`, key: `Key`) => `void` ) #	Returns `IDisposer` Inherited from `Settings` Sets a callback function to invoke when specific key of settings changes or is set. Click here for more info
onPrivate( key: `Key`, callback: ( value: `[""]`, target: `this`, key: `Key`) => `void` ) #	Returns `IDisposer` Inherited from `Settings` Sets a callback function to invoke when specific key of private settings changes or is set. Click here for more info
remove( key: `Key` ) #	Returns `void` Inherited from `Entity` Removes a setting value for the specified `key`. Click here for more info
removeAll() #	Returns `void` Inherited from `Settings` Removes all keys; Click here for more info
serializeDrawings( output: `"object"` \| `"string"`, indent?: `undefined` \| `string` ) #	Returns `Array` \| `string` Serializes all drawings into an array of simple objects or JSON. `output` parameter can either be `"object"` or `"string"` (default). Click here for more info @since 5.3.0
set( key: `Key`, value: `Value` ) #	Returns `Value` Inherited from `Entity` Sets a setting `value` for the specified `key`, and returns the same `value`. Click here for more info
setAll( settings: `Partial` ) #	Returns `void` Inherited from `Settings` Sets multiple settings at once. `settings` must be an object with key: value pairs. Click here for more info
setEraser( active: `boolean` ) #	Returns `void` Enables or disables eraser mode. @since 5.3.9
setTimeout( fn: () => `void`, delay: `number` ) #	Returns `IDisposer` Inherited from `Entity` Creates and returns a "disposable" timeout.
show() #	Returns `void` Inherited from `StockControl`
unserializeDrawings( data: `string` \| `Array` ) #	Returns `void` Parses data serialized with `serializeDrawings()` and adds drawings to the chart. Click here for more info @since 5.3.0
There are 19 inherited items currently hidden from this list.

animate(

options: AnimationOptions

)

Returns Animation

Inherited from Settings

Animates setting values from current/start values to new ones.

Click here for more info

clearDrawings()

Returns void

Clears all drawings.

@since 5.3.9

dispose()

Returns void

Inherited from Settings

Disposes this object.

get(

key: Key,
fallback: F

)

Returns NonNullable | F

Inherited from Entity

Returns settings value for the specified key.

If there is no value, fallback is returned instead (if set).

Click here for more info

has(

key: Key

)

Returns boolean

Inherited from Settings

Returns true if the setting exists.

Click here for more info

hide()

Returns void

Inherited from StockControl

isAccessible()

Returns boolean

Inherited from StockControl

isDisposed()

Returns boolean

Inherited from Settings

Returns true if this element is disposed.

isType(

type: string

)

Returns this

Inherited from Entity

Checks if element is of certain class (or inherits one).

new(

root: Root,
settings: ITSettings,
template?: Template

)

Static

Returns T

Inherited from Entity

Use this method to create an instance of this class.

Click here for more info

off(

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

)

Returns void

Inherited from Settings

Removes a callback for when value of a setting changes.

Click here for more info
@since 5.9.2

offPrivate(

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

)

Returns void

Inherited from Settings

Removes a callback for when value of a private setting changes.

Click here for more info
@since 5.9.2

on(

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

)

Returns IDisposer

Inherited from Settings

Sets a callback function to invoke when specific key of settings changes or is set.

Click here for more info

onPrivate(

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

)

Returns IDisposer

Inherited from Settings

Sets a callback function to invoke when specific key of private settings changes or is set.

Click here for more info

remove(

key: Key

)

Returns void

Inherited from Entity

Removes a setting value for the specified key.

Click here for more info

removeAll()

Returns void

Inherited from Settings

Removes all keys;

Click here for more info

serializeDrawings(

output: "object" | "string",
indent?: undefined | string

)

Returns Array | string

Serializes all drawings into an array of simple objects or JSON.

output parameter can either be "object" or "string" (default).

Click here for more info
@since 5.3.0

set(

key: Key,
value: Value

)

Returns Value

Inherited from Entity

Sets a setting value for the specified key, and returns the same value.

Click here for more info

setAll(

settings: Partial

)

Returns void

Inherited from Settings

Sets multiple settings at once.

settings must be an object with key: value pairs.

Click here for more info

setEraser(

active: boolean

)

Returns void

Enables or disables eraser mode.

@since 5.3.9

setTimeout(

fn: () => void,
delay: number

)

Returns IDisposer

Inherited from Entity

Creates and returns a "disposable" timeout.

show()

Returns void

Inherited from StockControl

unserializeDrawings(

data: string | Array

)

Returns void

Parses data serialized with serializeDrawings() and adds drawings to the chart.

Click here for more info
@since 5.3.0

There are 19 inherited items currently hidden from this list.

Events

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

Read about adding event handlers.

#click	Param { originalEvent: `IPointerEvent`, type: `"click"`, target: `this` } Inherited from `IStockControlEvents`
There is 1 inherited item currently hidden from this list.

#click

Param { originalEvent: IPointerEvent,
type: "click",
target: this }

Inherited from IStockControlEvents

There is 1 inherited item currently hidden from this list.