Overview
Drawing tools allow users to add interactive annotations to stock charts. These include trend lines, shapes, Fibonacci retracements, and more. All drawing tools extend the DrawingSeries base class.
Base Class: DrawingSeries
import { DrawingSeries } from "@amcharts/amcharts5/stock";
Settings
xAxis
DateAxis<AxisRenderer>
required
X-axis for the drawing.
yAxis
ValueAxis<AxisRenderer>
required
Y-axis for the drawing.
XYSeries used as the basis for the drawing.
Color of the lines/borders.
Opacity of the lines/borders (0-1).
Opacity of the fills (0-1).
Width of the lines/borders in pixels.
Dash pattern for lines/borders (e.g., [5, 5] for dashed lines).
Whether drawings should snap to X and Y values.
Value field to use when snapping data or calculating averages/regressions.Options: "open", "value", "low", "high"
Padding around the drawing when selected (in pixels).
Methods
enableDrawing()
Enables drawing mode for this series.
disableDrawing()
Disables drawing mode for this series.
toggleDrawing()
Toggles drawing mode on or off.
toggleDrawing(enabled?: boolean): void
Whether drawing mode should be enabled.
enableDrawingSelection()
Enables selection mode for drawings.
enableDrawingSelection(value: boolean): void
Whether selection should be enabled.
enableErasing()
Enables erasing mode - clicking drawings will delete them.
disableErasing()
Disables erasing mode.
selectDrawing()
Selects a drawing by its ID.
selectDrawing(id: string, keepSelection?: boolean): void
Whether to keep existing selections.
unselectDrawing()
Unselects a drawing by its ID.
unselectDrawing(id: string): void
unselectDrawings()
Unselects all drawings on this series.
unselectDrawings(): number
Number of drawings that were unselected.
unselectAllDrawings()
Unselects all drawings on all series.
unselectAllDrawings(): number
Number of drawings that were unselected.
deleteDrawing()
Deletes a drawing by its ID.
deleteDrawing(id: string): void
deleteSelected()
Deletes all currently selected drawings on this series.
@since 5.9.0
cancelDrawing()
Cancels the current drawing operation.
@since 5.9.0
disposeIndex()
Disposes a drawing at the specified index.
disposeIndex(index: number): void
getIndex()
Returns the index of a drawing with a specific ID.
getIndex(id: string): number | null
Index of the drawing, or null if not found.
getContext()
Returns the data context for a drawing with a specific ID.
getContext(id: string): any
The drawing’s data context.
clearDrawings()
Clears all drawings from the series.
Drawing Types
SimpleLineSeries
Base class for line-based drawings.
import { SimpleLineSeries } from "@amcharts/amcharts5/stock";
Show a dotted line extending from both ends of the drawn line.
addLine()
Programmatically adds a line drawing.
addLine(point: IPoint): void
Point coordinates { x: number, y: number }.
TrendLineSeries
Draws a trend line that snaps to data points.
import { TrendLineSeries } from "@amcharts/amcharts5/stock";
const trendLine = mainPanel.series.push(
TrendLineSeries.new(root, {
xAxis: dateAxis,
yAxis: valueAxis,
series: valueSeries,
strokeColor: am5.color(0xff0000),
strokeWidth: 2
})
);
trendLine.enableDrawing();
Lines
- SimpleLineSeries - Basic line
- TrendLineSeries - Trend line snapped to data
- HorizontalLineSeries - Horizontal line
- VerticalLineSeries - Vertical line
- HorizontalRaySeries - Horizontal ray extending infinitely
- LineArrowSeries - Line with arrow
- ParallelChannelSeries - Parallel channel
- QuadrantLineSeries - Quadrant lines
- RegressionSeries - Linear regression line
Shapes
- RectangleSeries - Rectangle
- EllipseSeries - Ellipse/circle
- CalloutSeries - Callout with text
- LabelSeries - Text label
- IconSeries - Icon marker
Advanced
- FibonacciSeries - Fibonacci retracement
- FibonacciTimezoneSeries - Fibonacci timezone
- AverageSeries - Average line
- PolylineSeries - Multi-point polyline
- DoodleSeries - Free-hand drawing
- Measure - Measurement tool
Working with Drawings
Adding Drawings to a Chart
import { TrendLineSeries } from "@amcharts/amcharts5/stock";
const trendLine = mainPanel.series.push(
TrendLineSeries.new(root, {
xAxis: dateAxis,
yAxis: valueAxis,
series: valueSeries,
strokeColor: am5.color(0xff0000),
strokeWidth: 2
})
);
Enabling Drawing Mode
// Enable drawing on the series
trendLine.enableDrawing();
// Or toggle on all drawing series
stockChart.toggleDrawing(true);
Enabling Selection
// Enable selection on the StockChart
stockChart.set("drawingSelectionEnabled", true);
// Or programmatically select a drawing
stockChart.selectDrawing("drawingId123");
Managing Drawings Programmatically
// Select a drawing
stockChart.selectDrawing("drawingId123", false);
// Unselect all drawings
stockChart.unselectDrawings();
// Delete a specific drawing
stockChart.deleteDrawing("drawingId123");
// Delete all selected drawings
stockChart.deleteSelectedDrawings();
// Cancel current drawing
stockChart.cancelDrawing();
// Clear all drawings from a series
trendLine.clearDrawings();
Listening to 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);
});
Serialization
Drawings can be serialized and restored:
// Serialize drawings
const drawings = [];
stockChart.panels.each((panel) => {
panel.series.each((series) => {
if (series.isType("DrawingSeries")) {
const data = series.data.values;
drawings.push({
type: series.className,
data: data
});
}
});
});
// Store drawings
localStorage.setItem("drawings", JSON.stringify(drawings));
// Restore drawings
const savedDrawings = JSON.parse(localStorage.getItem("drawings") || "[]");
savedDrawings.forEach((drawing) => {
// Find the appropriate series and restore data
const series = mainPanel.series.values.find(
s => s.className === drawing.type
);
if (series) {
series.data.setAll(drawing.data);
}
});
Example
import * as am5 from "@amcharts/amcharts5";
import * as am5stock from "@amcharts/amcharts5/stock";
import * as am5xy from "@amcharts/amcharts5/xy";
const root = am5.Root.new("chartdiv");
// Create chart and series (see StockChart example)
// Add trend line drawing tool
const trendLine = mainPanel.series.push(
am5stock.TrendLineSeries.new(root, {
xAxis: dateAxis,
yAxis: valueAxis,
series: valueSeries,
strokeColor: am5.color(0xff0000),
strokeWidth: 2
})
);
// Add Fibonacci retracement tool
const fibonacci = mainPanel.series.push(
am5stock.FibonacciSeries.new(root, {
xAxis: dateAxis,
yAxis: valueAxis,
series: valueSeries,
strokeColor: am5.color(0x0000ff)
})
);
// Add rectangle tool
const rectangle = mainPanel.series.push(
am5stock.RectangleSeries.new(root, {
xAxis: dateAxis,
yAxis: valueAxis,
series: valueSeries,
fillColor: am5.color(0xffff00),
fillOpacity: 0.3,
strokeColor: am5.color(0xffff00),
strokeWidth: 2
})
);
// Enable drawing selection
stockChart.set("drawingSelectionEnabled", true);
// Listen to drawing events
stockChart.events.on("drawingadded", (ev) => {
console.log("Drawing added:", ev.drawingId);
});
// Button to enable trend line drawing
document.getElementById("trendBtn").addEventListener("click", () => {
// Disable all drawing
stockChart.panels.each((panel) => {
panel.series.each((series) => {
if (series.isType("DrawingSeries")) {
series.disableDrawing();
}
});
});
// Enable trend line drawing
trendLine.enableDrawing();
});
// Button to delete selected drawings
document.getElementById("deleteBtn").addEventListener("click", () => {
stockChart.deleteSelectedDrawings();
});
See Also