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 are peer dependencies. ApexCharts must be available as a global, the same way the core library expects. This wrapper (0.2.1) targets apexstock 0.3.0 and above.

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.