Candlestick Charts

The Candlestick Chart is a data visualization tool designed to illustrate the price movements of an asset within a specific time period. This chart type is widely used in financial data analysis to show open, high, low, and close (OHLC) values of securities, providing users with clear insights into market trends.

Each candlestick represents one time unit (e.g., day, week, month) and contains:

Open – The price at which the trading period begins.
High – The highest price during the period.
Low – The lowest price during the period.
Close – The price at which the trading period ends.

The Candlestick Chart can be customized through the GC.Spread.Sheets.DataCharts API, allowing users to visualize their data interactively with custom styles, colors, and display options.

Data Format and Field Rules

Supported values: The Candlestick Chart requires 4 numeric value fields per data point, arranged in the following order: [open, high, low, close].

Field behavior:

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

The chart assumes valid and formatted input data.

Notes:
All four fields must be provided; otherwise the chart will not be rendered.
The palette should include at least two colors: the first for increase, the second for decrease.
If a bound field is missing or invalid, the chart may not display correctly.

Using Code

This example creates two data sources (a single‐price series and an OHLC dataset) and renders two candlestick charts for comparison.

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

function createStockTablebyPrice(dataManager) {
    return dataManager.addTable("Stock1", {
        data: [
            { date: "2025-09-01", price: 105 },
            { date: "2025-09-01", price: 95 },
            { date: "2025-09-01", price: 120 },
            { date: "2025-09-01", price: 110 },
            { date: "2025-09-01", price: 115 },
            { date: "2025-09-02", price: 115 },
            { date: "2025-09-02", price: 110 },
            { date: "2025-09-02", price: 122 },
            { date: "2025-09-02", price: 125 },
            { date: "2025-09-02", price: 120 },
            { date: "2025-09-03", price: 120 },
            { date: "2025-09-03", price: 125 },
            { date: "2025-09-03", price: 118 },
            { date: "2025-09-03", price: 110 },
            { date: "2025-09-03", price: 115 },
            { date: "2025-09-04", price: 115 },
            { date: "2025-09-04", price: 110 },
            { date: "2025-09-04", price: 118 },
            { date: "2025-09-04", price: 108 },
            { date: "2025-09-04", price: 110 },
            { date: "2025-09-05", price: 110 },
            { date: "2025-09-05", price: 115 },
            { date: "2025-09-05", price: 105 },
            { date: "2025-09-05", price: 107 },
            { date: "2025-09-05", price: 108 },
            { date: "2025-09-08", price: 110 },
            { date: "2025-09-08", price: 120 },
            { date: "2025-09-08", price: 130 },
            { date: "2025-09-08", price: 125 },
            { date: "2025-09-08", price: 128 },
            { date: "2025-09-09", price: 128 },
            { date: "2025-09-09", price: 125 },
            { date: "2025-09-09", price: 133 },
            { date: "2025-09-09", price: 131 },
            { date: "2025-09-09", price: 132 },
            { date: "2025-09-10", price: 132 },
            { date: "2025-09-10", price: 133 },
            { date: "2025-09-10", price: 135 },
            { date: "2025-09-10", price: 130 },
            { date: "2025-09-10", price: 134 },
            { date: "2025-09-11", price: 134 },
            { date: "2025-09-11", price: 125 },
            { date: "2025-09-11", price: 135 },
            { date: "2025-09-11", price: 130 },
            { date: "2025-09-11", price: 128 },
            { date: "2025-09-12", price: 128 },
            { date: "2025-09-12", price: 126 },
            { date: "2025-09-12", price: 120 },
            { date: "2025-09-12", price: 130 },
            { date: "2025-09-12", price: 122 },
        ],
    });
}
const StockTable1 = createStockTablebyPrice(dataManager);
await StockTable1.fetch();


function createStockTablebyOHLC(dataManager) {
    return dataManager.addTable("Stock2", {
        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 StockTable2 = createStockTablebyOHLC(dataManager);
await StockTable2.fetch();

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

dataChart1.setChartConfig({
                tableName: 'Stock1',
                plots: [
                    {
                        type: GC.Spread.Sheets.DataCharts.DataChartType.candlestick,
                        encodings: {
                            values: [
                                        // open
                                        { field: 'price' },
                                        // high
                                        { field: 'price' },
                                        // low
                                        { field: 'price' },
                                        // close
                                        { field: 'price' },
                                    ],
                            category: { field: 'date' },
                        }, 
                        config: {  
                            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: {
                    header: {
                        title: "Candlestick Chart (Single Price Series)",
                        padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 10,
                        },
                        textStyle: {
                            color: 'black',
                            fontSize: 24
                        }
                    }
                }
        });

dataChart2.setChartConfig({
                tableName: 'Stock2',
                plots: [
                    {
                        type: GC.Spread.Sheets.DataCharts.DataChartType.candlestick,
                        encodings: {
                            values: [
                                        { field: 'open' },
                                        { field: 'high' },
                                        { field: 'low' },
                                        { field: 'close' },
                                    ],
                            category: { field: 'date' },
                        },
                        config: {
                            palette: ['#E74C3C','#2ECC71']              
                        },
                    }
                ],
                config: {
                    dvStyle: {
                        fill: { type: 'CssColor', color: '#0f2233' },
                    },
                    header: {
                        title: "Candlestick Chart (OHLC Data)",
                        padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 10,
                        },
                        textStyle: {
                            color: '#D7E3F4',
                            fontSize: 24
                        }
                    }
                }
        });