Layout Change Events Guide

Overview

When the chart layout changes (for example, when the user picks a multi-chart layout from the toolbar layout menu), the SDK 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",
    appCallback: ({ eventType, message }) => {
        if (eventType === "CHART_SELECTED") {
            console.log("Selected chart:", message);
            // Update your UI here
        }
    }
});

2. Choose a Layout

Layouts are selected from the chart toolbar’s layout menu. The available layout options are:

"1" — single chart
"2" — 2 charts side-by-side
"1|1" — 2 charts vertically stacked
"2|2" — 4 charts in a 2x2 grid
"4" — 4-chart grid

When the user picks a layout from the menu, the SDK emits a CHART_SELECTED event so your application can react.

3. Handle the Event

When the layout changes, 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",
    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}`;
        }
    }
});
 
// When the user selects a layout from the toolbar (or clicks a chart), the
// CHART_SELECTED event is emitted automatically and the handler above runs.

Example: Analytics Tracking


const chart = GoChartingSDK.createChart("#chart-container", {
    symbol: "BYBIT:FUTURE:BTCUSDT",
    interval: "1D",
    datafeed: myDatafeed,
    licenseKey: "YOUR_LICENSE_KEY",
    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.