chart-0714/dist/types/options.d.ts

Professional trading chart library with advanced customization for trading journal apps

import { Candle } from './data';
export type ChartType = 'candle' | 'hollow' | 'bar' | 'line';
export type InitialViewType = 'all' | 'latest-100' | 'latest-200' | 'latest-300' | 'latest-500' | 'last-1-hour' | 'last-4-hours' | 'last-1-day' | 'last-1-week' | 'first-trade' | 'last-trade';
export interface ChartOptions {
    container: string | HTMLElement;
    data?: Candle[];
    width?: number;
    height?: number;
    theme?: 'dark' | 'light';
    pixelRatio?: number;
    initialView?: InitialViewType;
    zoomEnabled?: boolean;
    panEnabled?: boolean;
    chartType?: ChartType;
    candle?: {
        upColor?: string;
        downColor?: string;
        borderUpColor?: string;
        borderDownColor?: string;
        wickUpColor?: string;
        wickDownColor?: string;
    };
    volume?: {
        enabled?: boolean;
        height?: number;
        upColor?: string;
        downColor?: string;
        ma?: {
            enabled?: boolean;
            period?: number;
            color?: string;
        };
    };
    grid?: {
        show?: boolean;
        horizontal?: {
            show?: boolean;
            color?: string;
            style?: 'solid' | 'dashed' | 'dotted';
        };
        vertical?: {
            show?: boolean;
            color?: string;
            style?: 'solid' | 'dashed' | 'dotted';
        };
    };
    crosshair?: {
        show?: boolean;
        mode?: 'magnet' | 'normal';
        line?: {
            color?: string;
            style?: 'solid' | 'dashed' | 'dotted';
            width?: number;
        };
        label?: {
            show?: boolean;
            backgroundColor?: string;
            textColor?: string;
        };
    };
    verticalLines?: {
        grouping?: {
            enabled?: boolean;
            thresholdMinutes?: number;
            color?: string;
            style?: 'solid' | 'dashed' | 'dotted';
        };
    };
    priceScale?: {
        position?: 'left' | 'right' | 'none';
        autoScale?: boolean;
        mode?: 'normal' | 'percentage' | 'log';
    };
    timeScale?: {
        position?: 'bottom' | 'top' | 'none';
        timeVisible?: boolean;
        secondsVisible?: boolean;
    };
    disableUI?: boolean;
    useHeader?: boolean;
    debug?: boolean;
    onDebug?: (message: string) => void;
    localStorage?: boolean;
    storageKey?: string;
    zoomMode?: 'mouse' | 'latest';
    immediateRender?: boolean;
    initialAnimation?: boolean;
    maxCandles?: number;
    bufferMultiplier?: number;
    panels?: {
        main?: {
            height?: number;
        };
        volume?: {
            height?: number;
            colors?: {
                up?: string;
                down?: string;
            };
            maColor?: string;
            grid?: boolean | {
                show?: boolean;
            };
            showMA?: boolean;
            maLength?: number;
            opacity?: number;
            maxHeight?: number;
        };
        divider?: {
            color?: string;
            thickness?: number;
            draggable?: boolean;
            hoverColor?: string;
            cursor?: string;
        };
    };
    margin?: {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number;
    };
    priceScaleMargin?: number | {
        top?: number;
        bottom?: number;
    };
    rightMargin?: number;
    background?: string;
    trades?: Array<{
        type?: string;
        date?: number;
        count?: number;
        start?: number;
        end?: number;
    }>;
    line?: any;
    logScale?: boolean;
    indicators?: any[];
    autoScale?: boolean;
    animation?: boolean;
    axis?: {
        x?: any;
        y?: any;
    };
    shortcuts?: {
        [action: string]: string;
    };
    cursorType?: 'default' | 'crosshair' | 'dot';
}