Home > ApexStock Docs > Docs > Angular

Angular

ngx-apexstock is a thin, typed standalone Angular component around the imperative ApexStock class. It creates the instance after the view initializes, forwards input changes to update(), and tears it down on destroy.

Installation

npm install ngx-apexstock apexstock apexcharts

apexcharts, apexstock, @angular/core, and @angular/common (16 or newer) are peer dependencies. The wrapper requires apexstock >=0.5.0 <1 and apexcharts ^7.1.0, and those two have to agree: apexstock 0.5.x is the line that pairs with ApexCharts 7.x, so an older apexstock alongside apexcharts@7 will not resolve.

ApexCharts can reach the library three ways. Pass it to the component with the apexCharts input, register it once app-wide with ApexStock.setApexCharts(ApexCharts), or leave it on window.ApexCharts as the core library expects. Under a bundler, prefer one of the first two.

Usage

ApexStockComponent is standalone, so import it directly into a component's imports, no module required. Its selector is apex-stock.

import { Component } from '@angular/core'
import { ApexStockComponent } from 'ngx-apexstock'

@Component({
  selector: 'app-price',
  standalone: true,
  imports: [ApexStockComponent],
  template: `<apex-stock [options]="options" [series]="series"></apex-stock>`,
})
export class PriceComponent {
  options = { chart: { height: 420 }, theme: { mode: 'light' as const } }
  series = [{ name: 'Price', data: [] as { x: number; y: number[] }[] }]
}

Using NgModules? Add ApexStockComponent to the module's imports, standalone components are importable into modules. OHLC points use the ApexStock shape { x, y: [open, high, low, close], v }, see Data Format.

Inputs

Input	Type	Description
`options`	`StockChartOptions`	Full chart options (the 2nd argument to `new ApexStock`). Required.
`series`	`StockChartOptions["series"]`	Convenience: overrides `options.series`.

Updates fire when an input changes via Angular change detection. Assign a new object/array reference (rather than mutating in place) to trigger an update.

Accessing the instance

Grab the component with @ViewChild. getInstance() returns the live ApexStock instance (call any method) or null before view init; getElement() returns the container <div>.

import { Component, ViewChild } from '@angular/core'
import { ApexStockComponent } from 'ngx-apexstock'

@Component({
  standalone: true,
  imports: [ApexStockComponent],
  template: `
    <button (click)="addRSI()">Add RSI</button>
    <apex-stock #chart [options]="options"></apex-stock>
  `,
})
export class ChartComponent {
  @ViewChild('chart') chart!: ApexStockComponent
  options = { chart: { height: 400 } }

  addRSI() {
    this.chart.getInstance()?.updateIndicator('rsi')
  }
}

Through the instance you can reach the full core API: indicators, trading overlays, streaming, theme switching, and export.

Server-side rendering

The component renders only a container <div> on the server; the chart is created in a client-only ngAfterViewInit. The core apexstock package is import-safe in Node, but rendering needs a DOM.