angular-tradingview-widget

Angular component for rendering the TradingView Advanced Real-Time Chart Widget.

Install

npm install --save angular-tradingview-widget

Usage

Module

import { TradingviewWidgetModule } from 'angular-tradingview-widget';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TradingviewWidgetModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

component.html

    `<tradingview-widget [widgetConfig]="widgetConfig"></tradingview-widget>`

component.ts

    widgetConfig: ITradingViewWidget = {
        symbol: 'NASDAQ:AAPL'
    }

Constants and API differences

    enum BarStyles {
        BARS= '0',
        CANDLES= '1',
        HOLLOW_CANDLES= '9',
        HEIKIN_ASHI= '8',
        LINE= '2',
        AREA= '3',
        RENKO= '4',
        LINE_BREAK= '7',
        KAGI= '5',
        POINT_AND_FIGURE= '6'
    }

    enum IntervalTypes {
        D= 'D',
        W= 'W'
    };
    
    enum RangeTypes {
        YTD= 'ytd',
        ALL= 'all'
    };

    enum Themes {
        LIGHT= 'Light',
        DARK= 'Dark'
    };
    interface ITradingViewWidget {
        allow_symbol_change?: boolean;
        autosize?: boolean;
        calendar?: boolean;
        details?: boolean;
        enable_publishing?: boolean;
        height?: number;
        hideideas?: boolean;
        hide_legend?: boolean;
        hide_side_toolbar?: boolean;
        hide_top_toolbar?: boolean;
        hotlist?: boolean;
        interval?: 
            '1' |
            '3' |
            '5' |
            '15' |
            '30' |
            '60' |
            '120' |
            '180' |
            IntervalTypes.D |
            IntervalTypes.W;
        locale?: string;
        news?: string[];
        no_referral_id?: boolean;
        popup_height?: number | string;
        popup_width?: number | string;
        referral_id?: string;
        range?: 
            '1d' |
            '5d' |
            '1m' |
            '3m' |
            '6m' |
            RangeTypes.YTD |
            '12m' |
            '60m' |
            RangeTypes.ALL;
        save_image?: boolean;
        show_popup_button?: boolean;
        studies?: string[];
        style?:  BarStyles.BARS |
            BarStyles.CANDLES |
            BarStyles.HOLLOW_CANDLES |
            BarStyles.HEIKIN_ASHI |
            BarStyles.LINE |
            BarStyles.AREA |
            BarStyles.RENKO |
            BarStyles.LINE_BREAK |
            BarStyles.KAGI |
            BarStyles.POINT_AND_FIGURE;
        symbol: string;
        theme?: Themes.LIGHT | Themes.DARK;
        timezone?: string;
        toolbar_bg?: string;
        watchlist?: string[];
        widgetType?: string;
        width?: number;
        withdateranges?: boolean;
    }

All given props are passed on to the widget config. See this page for the TradingView Advanced Real-Time Chart API.

License

MIT

** Note Inspired by https://github.com/rafaelklaessen/react-tradingview-widget