OHLC Charts

The OHLC Data Chart (Open–High–Low–Close) is a specialized data visualization feature that represents the price movement of an asset over a specified period. It is widely used in financial and stock market applications to observe daily, weekly, or monthly trends.

Each bar in an OHLC chart displays four price points:

Open – The initial price at the beginning of the interval.
High – The highest price achieved during the interval.
Low – The lowest price reached during the interval.
Close – The final price at the end of the interval.

The OHLC chart enables users to visualize fluctuations, identify market patterns, and analyze trading performance over time.

Data Format and Field Rules

Supported values: The OHLC chart accepts 3 or 4 numeric values per data point.

4‑value mode: [open, high, low, close]
3‑value mode: [high, low, close]

Aggregation: OHLC values must not use aggregate functions.

Open: Uses the first value in the series.
High: Represents the maximum value.
Low: Represents the minimum value.
Close: Uses the last value.

Hover animation are not supported.

The chart assumes valid and formatted input data.

Using Code

Generates two stock Data Charts (OHLC and HLC) from a custom dataset.

const sheet = spread.getActiveSheet();
sheet.name("OHLC Chart");
const dataManager = spread.dataManager();

function createStockTable(dataManager) {
    return dataManager.addTable("Stock", {
        data: [
            {
                date: "2025-09-01",
                open: 105,
                high: 120,
                low: 95,
                close: 115,
            },
            {
                date: "2025-09-02",
                open: 115,
                high: 125,
                low: 110,
                close: 120,
            },
            {
                date: "2025-09-03",
                open: 120,
                high: 125,
                low: 110,
                close: 115,
            },
            {
                date: "2025-09-04",
                open: 115,
                high: 118,
                low: 108,
                close: 110,
            },
            {
                date: "2025-09-05",
                open: 110,
                high: 115,
                low: 105,
                close: 108,
            },
            {
                date: "2025-09-08",
                open: 110,
                high: 130,
                low: 110,
                close: 128,
            },
            {
                date: "2025-09-09",
                open: 128,
                high: 133,
                low: 125,
                close: 132,
            },
            {
                date: "2025-09-10",
                open: 132,
                high: 135,
                low: 130,
                close: 134,
            },
            {
                date: "2025-09-11",
                open: 134,
                high: 135,
                low: 125,
                close: 128,
            },
            {
                date: "2025-09-12",
                open: 128,
                high: 130,
                low: 120,
                close: 122,
            },
        ],
    });
}

const StockTable = createStockTable(dataManager);
await StockTable.fetch();

// Create OHLC data charts
const dataChart1 = sheet.dataCharts.add('data-chart1', 10, 10, 600, 400);
const dataChart2 = sheet.dataCharts.add('data-chart2', 10, 420, 600, 400);

dataChart1.setChartConfig({
                tableName: 'Stock',
                plots: [
                    {
                        type: GC.Spread.Sheets.DataCharts.DataChartType.ohlc,
                        encodings: {
                            values: [
                                        { field: 'open' },
                                        { field: 'high' },
                                        { field: 'low' },
                                        { field: 'close' },
                                    ],
                            category: { field: 'date' },
                        },
                    }
                ],
                config: {
                    header: {
                        title: "Daily Stock Prices – OHLC (4‑value mode)",
                        padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 10,
                        },
                        textStyle: {
                            color: 'black',
                            fontSize: 18
                        }
                    }
                }
        });

dataChart2.setChartConfig({
                tableName: 'Stock',
                plots: [
                    {
                        type: GC.Spread.Sheets.DataCharts.DataChartType.ohlc,
                        encodings: {
                            values: [
                                        { field: 'high' },
                                        { field: 'low' },
                                        { field: 'close' },
                                    ],
                            category: { field: 'date' },
                        },
                        config: {
                            palette: ['#FFB74D'],   
                            tooltip: [{
                                    style: {
                                        fill: { type: 'CssColor', color: '#ffffff' },
                                        stroke: { type: 'CssColor', color: '#e0e0e0' },
                                        strokeWidth: 1,
                                    },
                                    textStyle: {
                                        fontFamily: 'Calibri',
                                        fontSize: 12,
                                        fontWeight: 'Lighter',
                                        fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                                        color: '#333333',
                                    },
                                }]               
                        },
                    }
                ],
                config: {
                    dvStyle: {
                        fill: { type: 'CssColor', color: '#0f2233' },
                    },
                    header: {
                        title: "Daily Stock Prices – HLC (3‑value mode)",
                        padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 10,
                        },
                        textStyle: {
                            color: '#D7E3F4',
                            fontSize: 18
                        }
                    }
                }
        });