StockChart

Overview

StockChart is the main class for creating interactive financial charts in amCharts 5. It provides a complete solution for displaying stock data with multiple panels, technical indicators, comparison series, and drawing tools.

Class Reference

Creating a StockChart

import { StockChart } from "@amcharts/amcharts5/stock";

const stockChart = root.container.children.push(
  StockChart.new(root, {
    stockSeries: mainSeries,
    volumeSeries: volumeSeries
  })
);

Settings

stockSeries

XYSeries

Main value series used for calculations, indicators, and annotations.Learn more about setting main series

volumeSeries

XYSeries

Main volume series for the chart.Learn more about setting main series

autoSetPercentScale

boolean

default:"true"

When true, the chart automatically switches to percent scale when comparison series are added, and exits when all comparisons are removed.Learn more about percent mode

percentScaleSeriesSettings

Partial<IXYSeriesSettings>

Settings applied to the main value series when the chart is in percent scale mode.Learn more about configuring percent mode

percentScaleValueAxisSettings

Partial<IValueAxisSettings>

Settings applied to the ValueAxis of the main series when the chart is in percent scale mode.Learn more about configuring percent mode

stockPositiveColor

Color

Color for columns/candles on the main value series where the open value is lower than or equal to the close value.Learn more about positive/negative colors

stockNegativeColor

Color

Color for columns/candles on the main value series where the open value is higher than the close value.Learn more about positive/negative colors

volumePositiveColor

Color

Color for volume columns where the close value is higher than or equal to the open value.Learn more about positive/negative colors

volumeNegativeColor

Color

Color for volume columns where the close value is lower than the open value.Learn more about positive/negative colors

drawingSelectionEnabled

boolean

default:"false"

When true, all drawings are selectable and can be moved, rotated, or deleted.

erasingEnabled

boolean

default:"false"

When true, clicking on drawings deletes them.

hideDrawingGrips

boolean

default:"false"

When true, drawing grips are hidden when the StockChart is not in drawing mode.

autoHidePanelControls

boolean

default:"false"

When true, panel controls automatically hide when the mouse is not over the chart.

Properties

panels

ListAutoDispose<StockPanel>

A list of stock panels in the chart.Learn more about panels

const panel = stockChart.panels.push(
  StockPanel.new(root, {})
);

indicators

ListAutoDispose<Indicator>

A list of indicators on the chart.Learn more about indicators

const ma = stockChart.indicators.push(
  MovingAverage.new(root, {
    stockChart: stockChart,
    stockSeries: mainSeries,
    period: 50
  })
);

toolsContainer

Container

A Container at the top of the chart, suitable for additional tools like Scrollbar.

panelsContainer

Container

A Container where all stock panels are placed.

controls

StockControl[]

An array of all StockControls created for this chart.@since 5.7.0

spriteResizer

SpriteResizer

Instance of SpriteResizer used for various drawing tools.@since 5.7.0

Methods

setPercentScale()

Enables or disables percent scale mode.

setPercentScale(percentScale?: boolean): void

percentScale

boolean

Whether to enable percent scale mode. If not set, automatically determined based on compared series.

In percent scale mode, percentScaleSeriesSettings and percentScaleValueAxisSettings are applied to the main series and its Y axis.

addComparingSeries()

Adds a comparison series to the chart.

addComparingSeries(series: XYSeries): XYSeries

series

XYSeries

required

The series to add for comparison.

return

XYSeries

The same series that was added.

removeComparingSeries()

Removes a comparison series from the chart.

removeComparingSeries(series: XYSeries): void

series

XYSeries

required

The series to remove.

getVolumeColor()

Returns a color for volume based on current and previous close values.

getVolumeColor(
  dataItem: DataItem<IXYSeriesDataItem>,
  negativeColor?: Color,
  positiveColor?: Color
): Color | undefined

dataItem

DataItem<IXYSeriesDataItem>

required

Target data item.

negativeColor

Color

Color to use when close is lower than previous close (defaults to volumeNegativeColor).

positiveColor

Color

Color to use when close is greater than or equal to previous close (defaults to volumePositiveColor).

return

Color | undefined

The calculated volume color.

getControl()

Returns the first StockControl of a specific type.

getControl(type: string): StockControl | undefined

type

string

required

Control name (e.g., “IndicatorControl”, “DrawingControl”).

return

StockControl | undefined

The control instance, or undefined if not found.

@since 5.7.0

Drawing Management

selectDrawing()

Selects a drawing by its ID.

selectDrawing(id: string, keepSelection?: boolean): void

string

required

Drawing ID.

keepSelection

boolean

Whether to keep existing selections.

@since 5.9.0

unselectDrawing()

Unselects a drawing by its ID.

unselectDrawing(id: string): void

string

required

Drawing ID.

@since 5.9.0

unselectDrawings()

Unselects all currently selected drawings.

unselectDrawings(): number

return

number

Number of drawings that were unselected.

@since 5.9.0

deleteDrawing()

Deletes a drawing by its ID.

deleteDrawing(id: string): void

string

required

Drawing ID.

@since 5.9.0

deleteSelectedDrawings()

Deletes all currently selected drawings.

deleteSelectedDrawings(): void

@since 5.9.0

cancelDrawing()

Cancels the current drawing operation and deletes the drawing being drawn.

cancelDrawing(): void

@since 5.9.0

toggleDrawing()

Toggles drawing mode on or off.

toggleDrawing(enabled?: boolean): void

enabled

boolean

Whether drawing mode should be enabled.

@since 5.10.6

drawingsInteractive()

Enables or disables interactivity of drawings.

drawingsInteractive(value: boolean, except?: DrawingSeries): void

value

boolean

required

Whether drawings should be interactive.

except

DrawingSeries

Optional drawing series to exclude from the change.

@since 5.4.9

Utility Methods

markDirtyDrawings()

Forces redrawing of all annotations (drawings).

markDirtyDrawings(): void

markDirtyIndicators()

Forces redrawing of all indicators.

markDirtyIndicators(): void

Events

drawingsupdated

{}

Triggered when drawings change.

indicatorsupdated

{}

Triggered when indicators change.

drawingadded

{ drawingId: string, series: DrawingSeries, index: number }

Triggered when a drawing is added.@since 5.9.0

drawingremoved

{ drawingId: string, series: DrawingSeries, index: number }

Triggered when a drawing is removed.@since 5.9.0

drawingselected

{ drawingId: string, series: DrawingSeries, index: number }

Triggered when a drawing is selected.@since 5.9.0

drawingunselected

{ drawingId: string, series: DrawingSeries, index: number }

Triggered when a drawing is unselected.@since 5.9.0

Helper Function

registerClass()

Registers a custom class for serialization and restoration.

registerClass(name: string, ref: any): void

name

string

required

Class name.

ref

any

required

Class reference.

Use this to register custom indicators or drawing tools so they can be serialized and restored. @since 5.7.2

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 main stock panel
const mainPanel = root.container.children.push(
  am5stock.StockPanel.new(root, {})
);

// Create axes
const valueAxis = mainPanel.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

const dateAxis = mainPanel.xAxes.push(
  am5xy.GaplessDateAxis.new(root, {
    baseInterval: { timeUnit: "day", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);

// Create series
const valueSeries = mainPanel.series.push(
  am5xy.CandlestickSeries.new(root, {
    xAxis: dateAxis,
    yAxis: valueAxis,
    valueXField: "Date",
    valueYField: "Close",
    openValueYField: "Open",
    highValueYField: "High",
    lowValueYField: "Low"
  })
);

// Create stock chart
const stockChart = root.container.children.push(
  am5stock.StockChart.new(root, {
    stockSeries: valueSeries,
    stockPositiveColor: am5.color(0x00ff00),
    stockNegativeColor: am5.color(0xff0000)
  })
);

stockChart.panels.push(mainPanel);

// Add indicator
const ma = stockChart.indicators.push(
  am5stock.MovingAverage.new(root, {
    stockChart: stockChart,
    stockSeries: valueSeries,
    period: 50,
    seriesColor: am5.color(0x0000ff)
  })
);

Core

Shapes

Controls

XY Charts

Map Charts

Stock Charts

Hierarchy Charts

Utilities

Overview

Class Reference

Creating a StockChart

Settings

Properties

Methods

setPercentScale()

addComparingSeries()

removeComparingSeries()

getVolumeColor()

getControl()

Drawing Management

selectDrawing()

unselectDrawing()

unselectDrawings()

deleteDrawing()

deleteSelectedDrawings()

cancelDrawing()

toggleDrawing()

drawingsInteractive()

Utility Methods

markDirtyDrawings()

markDirtyIndicators()

Events

Helper Function

registerClass()

Example

See Also

Build docs developers (and LLMs) love

Core

Shapes

Controls

XY Charts

Map Charts

Stock Charts

Hierarchy Charts

Utilities

​Overview

​Class Reference

​Creating a StockChart

​Settings

​Properties

​Methods

​setPercentScale()

​addComparingSeries()

​removeComparingSeries()

​getVolumeColor()

​getControl()

​Drawing Management

​selectDrawing()

​unselectDrawing()

​unselectDrawings()

​deleteDrawing()

​deleteSelectedDrawings()

​cancelDrawing()

​toggleDrawing()

​drawingsInteractive()

​Utility Methods

​markDirtyDrawings()

​markDirtyIndicators()

​Events

​Helper Function

​registerClass()

​Example

​See Also

Build docs developers (and LLMs) love

Overview

Class Reference

Creating a StockChart

Settings

Properties

Methods

setPercentScale()

addComparingSeries()

removeComparingSeries()

getVolumeColor()

getControl()

Drawing Management

selectDrawing()

unselectDrawing()

unselectDrawings()

deleteDrawing()

deleteSelectedDrawings()

cancelDrawing()

toggleDrawing()

drawingsInteractive()

Utility Methods

markDirtyDrawings()

markDirtyIndicators()

Events

Helper Function

registerClass()

Example

See Also