Layout Change Events Guide

Overview

When you change the chart layout using the changeLayout() API, the SDK now automatically emits a CHART_SELECTED event to notify your application which chart is currently selected.

Use Cases

Sync External UI: Update watchlists, trading panels, or other UI components when the layout changes
Analytics: Track which charts users are viewing after layout changes
State Management: Keep your application state in sync with the selected chart
Multi-Chart Coordination: Coordinate behavior across multiple charts

How It Works

1. Initialize Chart with Callback


const chart = GoChartingSDK.createChart("#chart-container", {
    symbol: "BYBIT:FUTURE:BTCUSDT",
    interval: "1D",
    datafeed: myDatafeed,
    licenseKey: "YOUR_LICENSE_KEY",
    layout: "2x2",
    appCallback: (eventType, message) => {
        if (eventType === "CHART_SELECTED") {
            console.log("Selected chart:", message);
            // Update your UI here
        }
    }
});

2. Change Layout Programmatically


// Change to single chart
chart.changeLayout("1");
 
// Change to 2 charts side-by-side
chart.changeLayout("2");
 
// Change to 2 charts vertically stacked
chart.changeLayout("1-1");
 
// Change to 4 charts in a 2x2 grid
chart.changeLayout("2|2");

3. Handle the Event

When you call changeLayout(), the SDK will:

Update the chart layout
Determine which chart is selected (usually the first chart, index 0)
Emit a CHART_SELECTED event with the selected chart’s information

Event Data Structure


{
    chartId: "chart-0",           // Unique chart ID
    symbol: "BYBIT:FUTURE:BTCUSDT", // Symbol of the selected chart
    interval: "1D",               // Interval of the selected chart
    idx: 0,                       // Index of the selected chart (0-based)
    id: "chart-0"                 // Same as chartId
}

Example: Syncing Trading Panel


let selectedChartInfo = null;
 
const chart = GoChartingSDK.createChart("#chart-container", {
    symbol: "BYBIT:FUTURE:BTCUSDT",
    interval: "1D",
    datafeed: myDatafeed,
    licenseKey: "YOUR_LICENSE_KEY",
    layout: "2x2",
    appCallback: (eventType, message) => {
        if (eventType === "CHART_SELECTED") {
            selectedChartInfo = message;
            
            // Update trading panel with selected chart's symbol
            updateTradingPanel(message.symbol);
            
            // Update watchlist to highlight selected symbol
            highlightSymbolInWatchlist(message.symbol);
            
            // Update UI to show selected chart info
            document.getElementById("selected-chart-info").textContent = 
                `Chart ${message.idx}: ${message.symbol} @ ${message.interval}`;
        }
    }
});
 
// Layout change buttons
document.getElementById("btn-single").addEventListener("click", () => {
    chart.changeLayout("1");
    // CHART_SELECTED event will be emitted automatically
});
 
document.getElementById("btn-2x2").addEventListener("click", () => {
    chart.changeLayout("2|2");
    // CHART_SELECTED event will be emitted automatically
});

Example: Analytics Tracking


const chart = GoChartingSDK.createChart("#chart-container", {
    symbol: "BYBIT:FUTURE:BTCUSDT",
    interval: "1D",
    datafeed: myDatafeed,
    licenseKey: "YOUR_LICENSE_KEY",
    layout: "1",
    appCallback: (eventType, message) => {
        if (eventType === "CHART_SELECTED") {
            // Track layout changes in analytics
            analytics.track("chart_selected_after_layout_change", {
                chartIndex: message.idx,
                symbol: message.symbol,
                interval: message.interval,
                timestamp: new Date().toISOString()
            });
        }
    }
});

Important Notes

Event Timing: The CHART_SELECTED event is emitted after the layout change is complete and the chart stores are initialized.
Selected Chart: By default, the first chart (index 0) is selected after a layout change.
Manual Selection: Users can also manually select a chart by clicking on it, which will also emit a CHART_SELECTED event.
Backward Compatibility: This feature is fully backward compatible. If you don’t provide an appCallback, the layout change will work as before without emitting events.