Drawing Tools - amCharts 5

Introduction

Drawing tools allow users to annotate stock charts with lines, shapes, and technical analysis tools. Drawings can be interactive, selectable, and persistent.

Enabling Drawing Tools

Drawing tools are typically enabled through the toolbar’s DrawingControl:

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

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

Drawing Series Types

All drawing tools extend from DrawingSeries and are added to chart panels.

Simple Line

Draw straight lines between two points:

const simpleLine = am5stock.SimpleLineSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x000000),
  strokeWidth: 2
});

mainPanel.series.push(simpleLine);

Trend Line

Extended lines that continue beyond the second point:

const trendLine = am5stock.TrendLineSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x0000FF),
  strokeWidth: 2
});

mainPanel.series.push(trendLine);

Line Arrow

Lines with arrow heads:

const lineArrow = am5stock.LineArrowSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0xFF0000),
  strokeWidth: 2
});

mainPanel.series.push(lineArrow);

Horizontal Line

Horizontal lines across the chart:

const horizontalLine = am5stock.HorizontalLineSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x00FF00),
  strokeWidth: 2,
  strokeDasharray: [2, 2]
});

mainPanel.series.push(horizontalLine);

Vertical Line

Vertical lines for marking dates:

const verticalLine = am5stock.VerticalLineSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0xFFFF00),
  strokeWidth: 2
});

mainPanel.series.push(verticalLine);

Horizontal Ray

Horizontal line extending from a point:

const horizontalRay = am5stock.HorizontalRaySeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0xFF00FF)
});

mainPanel.series.push(horizontalRay);

Shapes

Rectangle

Draw rectangular areas:

const rectangle = am5stock.RectangleSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  fillColor: am5.color(0x0000FF),
  fillOpacity: 0.2,
  strokeColor: am5.color(0x0000FF),
  strokeWidth: 2
});

mainPanel.series.push(rectangle);

Ellipse

Draw circles and ellipses:

const ellipse = am5stock.EllipseSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  fillColor: am5.color(0xFF0000),
  fillOpacity: 0.2,
  strokeColor: am5.color(0xFF0000),
  strokeWidth: 2
});

mainPanel.series.push(ellipse);

Polyline

Draw multi-segment lines:

const polyline = am5stock.PolylineSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x00FF00),
  strokeWidth: 2
});

mainPanel.series.push(polyline);

Doodle

Free-hand drawing:

const doodle = am5stock.DoodleSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x000000),
  strokeWidth: 2
});

mainPanel.series.push(doodle);

Technical Drawing Tools

Fibonacci Retracement

Draw Fibonacci levels between two points:

const fibonacci = am5stock.FibonacciSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x0000FF)
});

mainPanel.series.push(fibonacci);

Fibonacci retracements automatically display 0%, 23.6%, 38.2%, 50%, 61.8%, and 100% levels.

Fibonacci Timezone

Vertical Fibonacci lines for time analysis:

const fibonacciTimezone = am5stock.FibonacciTimezoneSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0xFF0000)
});

mainPanel.series.push(fibonacciTimezone);

Parallel Channel

Two parallel trend lines:

const parallelChannel = am5stock.ParallelChannelSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x0000FF),
  fillColor: am5.color(0x0000FF),
  fillOpacity: 0.1
});

mainPanel.series.push(parallelChannel);

Quadrant Line

Divide areas into quadrants:

const quadrant = am5stock.QuadrantLineSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x00FF00)
});

mainPanel.series.push(quadrant);

Regression Line

Linear regression through points:

const regression = am5stock.RegressionSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0xFF00FF),
  field: "close"
});

mainPanel.series.push(regression);

Average Line

Calculate and display average price:

const average = am5stock.AverageSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x00FFFF),
  field: "close"
});

mainPanel.series.push(average);

Annotations

Label

Add text labels to the chart:

const label = am5stock.LabelSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x000000),
  fillColor: am5.color(0xFFFFFF),
  text: "Note"
});

mainPanel.series.push(label);

Callout

Callout boxes with pointers:

const callout = am5stock.CalloutSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x000000),
  fillColor: am5.color(0xFFFFFF)
});

mainPanel.series.push(callout);

Icon

Place icons on the chart:

const icon = am5stock.IconSeries.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  iconSvgPath: "M10,0 L20,20 L0,20 Z" // Triangle
});

mainPanel.series.push(icon);

Measure Tool

Measure distance and percentage change:

const measure = am5stock.Measure.new(root, {
  xAxis: dateAxis,
  yAxis: valueAxis,
  series: valueSeries,
  strokeColor: am5.color(0x000000)
});

mainPanel.series.push(measure);

Drawing Selection

Enable selection and manipulation of drawings:

const stockChart = root.container.children.push(
  am5stock.StockChart.new(root, {
    drawingSelectionEnabled: true
  })
);

With selection enabled:

Click a drawing to select it
Selected drawings show resize handles
Press Delete to remove selected drawings
Press Esc to cancel drawing or deselect

Erasing Mode

Enable click-to-delete mode:

stockChart.set("erasingEnabled", true);

Programmatic Drawing Control

Select a Drawing

stockChart.selectDrawing("drawing-id");

Unselect Drawings

stockChart.unselectDrawings();

Delete a Drawing

stockChart.deleteDrawing("drawing-id");

Toggle Drawing Mode

stockChart.toggleDrawing(true); // Enable drawing
stockChart.toggleDrawing(false); // Disable drawing

Drawing Events

Listen for drawing events:

stockChart.events.on("drawingadded", (ev) => {
  console.log("Drawing added:", ev.drawingId, ev.series, ev.index);
});

stockChart.events.on("drawingremoved", (ev) => {
  console.log("Drawing removed:", ev.drawingId);
});

stockChart.events.on("drawingselected", (ev) => {
  console.log("Drawing selected:", ev.drawingId);
});

stockChart.events.on("drawingunselected", (ev) => {
  console.log("Drawing unselected:", ev.drawingId);
});

stockChart.events.on("drawingsupdated", (ev) => {
  console.log("Drawings were updated");
});

Drawing Settings

All drawing series share common settings:

const drawingSeries = am5stock.SimpleLineSeries.new(root, {
  xAxis: dateAxis,              // Required: X axis
  yAxis: valueAxis,             // Required: Y axis
  series: valueSeries,          // Required: series to snap to
  strokeColor: am5.color(0x000000), // Line color
  strokeWidth: 2,                // Line width
  strokeDasharray: [5, 3],      // Dash pattern
  strokeOpacity: 1,              // Line opacity (0-1)
  fillColor: am5.color(0x000000), // Fill color
  fillOpacity: 0.2,              // Fill opacity (0-1)
  snapToData: true,              // Snap to data points
  field: "close",                // Field to snap to
  selectorPadding: 5             // Selection padding in pixels
});

Complete Drawing Tools List

Lines:

SimpleLineSeries
TrendLineSeries
LineArrowSeries
HorizontalLineSeries
VerticalLineSeries
HorizontalRaySeries

Shapes:

RectangleSeries
EllipseSeries
PolylineSeries
DoodleSeries

Technical Tools:

FibonacciSeries
FibonacciTimezoneSeries
ParallelChannelSeries
QuadrantLineSeries
RegressionSeries
AverageSeries

Annotations:

LabelSeries
CalloutSeries
IconSeries
Measure

Persistence

Drawings can be serialized and restored:

// Save drawings
const drawingsData = [];
stockChart.panels.each((panel) => {
  panel.series.each((series) => {
    if (series.isType("DrawingSeries")) {
      // Serialize drawing data
      drawingsData.push(series.data.values);
    }
  });
});

// Restore drawings
// Re-create drawing series and set data

Stock Charts Overview - Basic stock chart setup
Toolbar - Add DrawingControl to toolbar
Indicators - Technical analysis indicators

Documentation Index

​Introduction

​Enabling Drawing Tools

​Drawing Series Types

​Simple Line

​Trend Line

​Line Arrow

​Horizontal Line

​Vertical Line

​Horizontal Ray

​Shapes

​Rectangle

​Ellipse

​Polyline

​Doodle

​Technical Drawing Tools

​Fibonacci Retracement

​Fibonacci Timezone

​Parallel Channel

​Quadrant Line

​Regression Line

​Average Line

​Annotations

​Label

​Callout

​Icon

​Measure Tool

​Drawing Selection

​Erasing Mode

​Programmatic Drawing Control

​Select a Drawing

​Unselect Drawings

​Delete a Drawing

​Toggle Drawing Mode

​Drawing Events

​Drawing Settings

​Complete Drawing Tools List

​Persistence

​Related Topics