Grid

The grid is a system of horizontal and vertical lines that define units of time and price on the chart.

• Horizontal lines represent price levels.
• Vertical lines represent time intervals.

Each grid box corresponds to a specific time range (e.g., 1 day, 1 hour) and price range (e.g., $1–$2, $50–$60). By plotting price data on this structure, users can identify market patterns and trends across various financial instruments, such as stocks, futures, currencies, and options.

You can control grid visibility using the ChartBootstrap API.

changeGridVisibility = (chart: Chart, visible: boolean) => {
    chart.setGridVisible(visible);
    chart.setGridVertical(visible);
    chart.setGridHorizontal(visible);
}

setGridConfig = (chart: Chart) => {
    // you can also configure grid display options such as width and dash
    chart.setGridConfig({ dash: [5, 5], width: 2, horizontal: true, visible: true, vertical: true });
}

Grid configuration

export interface GridComponentConfig {
    visible: boolean;
    /**
     * Shows vertical grid lines.
     */
    vertical: boolean;
    /**
     * Shows horizontal grid lines.
     */
    horizontal: boolean;
    /**
     * Width of grid lines in pixels.
     */
    width: number;
    /**
     * Line dash configuration like [1,2].
     */
    dash: Array<number>;
    color?: string;
}