Angular

The charting library provides an Angular standalone component for easy integration.

Installation

npm install financial-charting-library

Basic Usage

1. Import the Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartComponent } from 'financial-charting-library/angular';

2. Use in Your Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartComponent } from 'financial-charting-library/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ChartComponent],
  template: `
    <div style="padding: 20px">
      <h1>Financial Chart</h1>
      <chart-component
        [datafeed]="datafeed"
        [symbol]="symbol"
        [interval]="interval"
        [theme]="'light'"
        [width]="'100%'"
        [height]="'600px'"
        (chartReady)="onChartReady()"
      ></chart-component>
    </div>
  `
})
export class AppComponent {
  datafeed: any;
  symbol = 'AAPL';
  interval = '1D';

  constructor() {
    // Initialize your datafeed
    this.datafeed = new YourDataFeedImplementation();
  }

  onChartReady() {
    console.log('Chart is ready');
  }
}

Component Inputs

The chart-component accepts these inputs:

Input	Type	Description
datafeed	IBasicDataFeed	Required - Datafeed instance
symbol	string	Required - Symbol to display
interval	string	Required - Timeframe
theme	string	'light' or 'dark'
width	string	Chart width
height	string	Chart height

Outputs

Output	Type	Description
chartReady	EventEmitter	Emitted when chart is initialized

Complete Example

Here's a complete example with controls:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartComponent } from 'financial-charting-library/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ChartComponent],
  template: `
    <div style="padding: 20px">
      <h1>Financial Chart - Angular Example</h1>
      
      <!-- Controls -->
      <div style="margin-bottom: 20px; display: flex; gap: 10px">
        <button (click)="changeSymbol('AAPL')">AAPL</button>
        <button (click)="changeSymbol('GOOGL')">GOOGL</button>
        <button (click)="changeSymbol('MSFT')">MSFT</button>
        <button (click)="toggleTheme()">Toggle Theme ({{ theme }})</button>
      </div>

      <!-- Chart -->
      <chart-component
        [datafeed]="datafeed"
        [symbol]="symbol"
        [interval]="interval"
        [theme]="theme"
        [width]="'100%'"
        [height]="'600px'"
        (chartReady)="onChartReady()"
      ></chart-component>
    </div>
  `
})
export class AppComponent {
  datafeed: any;
  symbol = 'AAPL';
  interval = '1D';
  theme = 'light';

  constructor() {
    this.datafeed = new YourDataFeedImplementation();
  }

  changeSymbol(newSymbol: string) {
    this.symbol = newSymbol;
  }

  toggleTheme() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
  }

  onChartReady() {
    console.log('Chart is ready');
  }
}

Next Steps

• Learn about DataFeed implementation
• Explore Chart Configuration
• Add Custom Indicators