Chart Configuration

Charts can range from simple graphs of static data to complex, real-time information dashboards. For comparative examples, see the helloworld.html template located in the library root folder, as well as the sample-template-active-trader.html in the examples/templates folder.

A configuration object determines many of the features and capabilities of a chart, including addOns, quote feeds, menu items, and more. The consolidation of configuration information in a dedicated object offers the following advantages:

• Behavior customization without code changes
• Configuration overrides that simplify upgrades
• Availability of configuration information in various contexts, enabling lazy instantiation of web components, dialog boxes, and other application elements for improved performance

The ChartIQ library includes a default configuration object that establishes a basic chart configuration.

This tutorial documents ChartIQ's default configuration object, explains how to use the configuration object, and describes how to create a custom configuration to your specifications.

Note: This tutorial requires version 8.0 or later of the charting library.

Topics

• Default configuration
• Implementation
• Customization
• Chart ID

Default Configuration

The default configuration object is a JavaScript object literal defined in the defaultConfiguration.js file, which is located in the js folder of the library. The object contains the following default properties:

Properties

The Default Configuration Object includes the following properties.

initialSymbol

• Description:
  The identifier of a financial instrument. Data for the instrument is plotted as the main series of the chart. This property is only used when the chart is first loaded.
• Type:
  string | object

Object Properties:

Default Value:

initialSymbol: {
    symbol: "AAPL",
    name: "Apple Inc",
    exchDisp: "NASDAQ"
},

root

• Description:
  The highest common ancestor node for this chart.
• Type:
  node

Default Value:

root: document,

initialData

• Description:
  The initial chart data; for example, the data array created by the examples/data/STX_SAMPLE_5MIN.js file.
  This property works only if:
  • the quoteFeed argument is omitted from the call to the getConfig function (see the Implementation topic),
  • the restore property is set to false,
  • and the chart is created with:
    • a call to this configuration object's createChart function with CIQ.UI undefined or null (which is implemented by importing CIQ from js/chartiq.js rather than js/components.js or js/componentUI.js), or
    • a direct call to CIQ.ChartEngine.create with the params.deferLoad parameter omitted or set to false.
• Type:
  array

Default Value:

initialData: undefined,

enabledAddOns

Important: The application must import js/addOns.js, which contains the addOn source code; addOns are configured in the addOns property.

• Description:
  A list of available addOns and their enabled status when the chart loads.

• Type:
  object

Object Properties:

Default Value:

enabledAddOns: {
    animation: false,
    continuousZoom: false,
    forecasting: false,
    outliers: false,
    dataLoader: true,
    extendedHours: true,
    fullScreen: true,
    inactivityTimer: true,
    rangeSlider: true,
    shortcuts: true,
    tableView: true,
    tooltip: true
},

addOns

Important: AddOns are configured here, but are not used in the chart unless enabled in the enabledAddOns property or the selected addOn's enabled property is set to true.

• Description:
  The available chart addOns and their initial configuration.
• Type:
  object

Object Properties:

Default Value:

addOns: {
    tooltip: {
        ohl: null,
        volume: null,
        series: true,
        studies: true,
        enabled: true
    },
    inactivityTimer: {
        minutes: 30,
        enabled: true
    },
    animation: {
        animationParameters: { tension: 0.3 },
        enabled: false
    },
    outliers: { enabled: false },
    rangeSlider: { enabled: true },
    fullScreen: { enabled: true },
    extendedHours: {
        filter: true,
        enabled: true
    },
    continuousZoom: {
        periodicities: [
            { period: 1, interval: "month" },
            { period: 1, interval: "week" },
            { period: 1, interval: "day" },
            { period: 8, interval: 30 },
            { period: 1, interval: 30 },
            { period: 5, interval: 1 },
            { period: 1, interval: 1 },
            { period: 10, interval: 1, timeUnit: "second" },
            { period: 1, interval: 1, timeUnit: "second" }
        ],
        boundaries: {
            maxCandleWidth: 15,
            minCandleWidth: 3
        },
        enabled: false
    },
    forecasting: {
        moduleName: "PlotComplementer",
        id: "forecast",
        decorator: {
            symbol: "_fcst",
            display: " Forecast"
        },
        renderingParameters: {
            chartType: "channel",
            opacity: 0.5,
            pattern: "dotted"
        },
        quoteFeed: resources.forecastQuoteFeed,
        behavior: {
            refreshInterval: 60
        },
        enabled: false
    },
    tableView: { enabled: true },
    dataLoader: { enabled: true },
    shortcuts: { enabled: true }
}

getCanvasTitle

• Description:
  If set, it generates a custom text string for an accessible page when the canvas is focused.
• Type:
  function

Default Value:

getCanvasTitle: undefined,

onNewSymbolLoad

• Description:
  Optionally contains two functions (either or both functions can be omitted).
• Type:
  Object

Object Properties:

Default Value:

onNewSymbolLoad: {
    removeSeries(series) {
        return series.parameters.bucket !== "study" && !series.parameters.retoggle;
    },
    loadError(error, uiContext) {

    }
},

restore

• Description:
  Indicates whether to configure, save, and restore the chart layout, preferences, and drawings. The object type supports a symbol property that, when set to false, restores everything except the symbol.
• Type:
  boolean | object

Default Value:

restore: true,

language

• Description:
  Optionally set a language for the UI, after it has been initialized.
• Type:
  string

Default Value:

language: null

setHtmlLang

• Description:
  Optionally set the <html> tag's lang attribute whenever language is set on chart.
• Type:
  boolean

Default Value:

setHtmlLang: true,

lookupDriver

• Description:
  The function definition for the chart's default symbol lookup driver.
  Note: The implementation provided as the default for this property is defined in examples/feeds/symbolLookupChartIQ.js.
• Type:
  function

Default Value:

lookupDriver: CIQ.getFn("ChartEngine.Driver.Lookup.ChartIQ"),

hotkeyConfig

• Description:
  A list of keystroke shortcuts and the actions they perform.

• Type:
  object

Object properties:

Default Value:

hotkeyConfig: {
    hotkeys: [
        // precise navigation
        { label: "Pan chart up", action: "up", options: { percent: 0.02 }, commands: ["ArrowUp", "Up"] },
        { label: "Pan chart down", action: "down", options: { percent: 0.02 }, commands: ["ArrowDown", "Down"] },
        { label: "Pan chart right", action: "right", options: { bars: 1 }, commands: ["ArrowRight", "Right"] },
        { label: "Pan chart left", action: "left", options: { bars: 1 }, commands: ["ArrowLeft", "Left"] },
        // fast navigation
        { label: "Pan chart up fast", action: "up", options: { percent: 0.2 }, commands: ["Shift+ArrowUp", "Shift+Up"] },
        { label: "Pan chart down fast",  action: "down", options: { percent: 0.2 }, commands: ["Shift+ArrowDown", "Shift+Down"] },
        { label: "Pan chart right fast", action: "right", options: { bars: 10 }, commands: ["Shift+ArrowRight", "Shift+Right"] },
        { label: "Pan chart left fast", action: "left", options: { bars: 10 }, commands: ["Shift+ArrowLeft", "Shift+Left"] },
        { label: "Pan to home", action: "home", commands: ["Home"] },
        { label: "Pan to start of loaded data", action: "end", commands: ["End"] },
        // page
        { label: "Page chart right", action: "pageRight", commands: ["Alt+ArrowRight", "Alt+Right", "PageUp"] },
        { label: "Page chart left", action: "pageLeft", commands: ["Alt+ArrowLeft", "Alt+Left", "PageDown"] },
        // zoom
        { label: "Zoom in x-axis", action: "zoomInXAxis", commands: ["NumpadAdd", "="] },
        { label: "Zoom out x-axis", action: "zoomOutXAxis", commands: ["NumpadSubtract", "-"] },
        { label: "Zoom in y-axis", action: "zoomInYAxis", commands: ["+"] },
        { label: "Zoom out y-axis", action: "zoomOutYAxis", commands: ["_"] },
        // toggle
        { label: "Toggle crosshair", action: "toggleCrosshairs", commands: ["Alt+Backslash", "Alt+\\", "Alt+Þ"] }, // Alt+Þ for legacy edge support
        { label: "Toggle continuous zoom", action: "toggleContinuousZoom", commands: ["Alt+Digit0", "Alt+0"], extension: "continuousZoom" },
        // UI navigation
        { label: "Tab to next", action: "keyboardNavigateNext", options: {alwaysEnabled: true}, commands: ["Tab"] },
        { label: "Tab to previous", action: "keyboardNavigatePrevious", options: {alwaysEnabled: true}, commands: ["Shift+Tab"] },
        // Tab navigation deselect is available. Comment out this line and assign an open key combination to enable.
        //{ label: "Deactivate Tab Selection", action: "keyboardNavigateDeselect", commands: [""] },
        // drawings
        { label: "Select at tab", action: "keyboardNavigateClick", commands: ["Enter", "Space"] },
        { label: "Toggle Drawings", action: "toggleDrawings", commands: ["Shift+Alt+KeyH"] },
        // AddOns and Plugins
        { label: "Table view", action: "tableView", commands: ["Alt+KeyK"], extension: "tableView", ariaLabel: "Opens chart data in table format" }, // tableView is modal view, toggling off requires use of Escape
        { label: "Range Slider", action: "rangeSlider", commands: ["Shift+Alt+KeyR"], extension: "rangeSlider" },
        { label: "Extended Hours", action: "extendedHours", commands: ["Shift+Alt+KeyX"], extension: "extendedHours" },
        { label: "Outliers", action: "outliers", commands: ["Shift+Alt+KeyO"], extension: "outliers" },
        { label: "Market Depth", action: "marketDepth", commands: ["Shift+Alt+KeyD"], extension: "marketDepth" },
        { label: "L2 Heat Map", action: "l2HeatMap", commands: ["Shift+Alt+KeyM"], extension: "marketDepth" },
        { label: "Import Data", action: "dataLoader", commands: ["Alt+KeyI"], extension: "dataLoader" },
        { label: "Trade From Chart", action: "tfc", commands: ["Shift+Alt+KeyP"], extension: "tfc" },
        // global
        { label: "Symbol Lookup", action: "symbolLookup", commands: ["Shift+Alt+KeyL"], ariaLabel: "Opens main symbol lookup for chart" },
        { label: "Delete a highlighted item or the active drawing", action: "delete", commands: ["Backspace", "Delete", "Del"] },
        { label: "Close an open menu / dialog box or undo the active drawing", action: "escape", commands: ["Escape", "Esc"] },
        { label: "Keyboard Shortcuts", action: "shortcuts", commands: ["Shift+Alt+Slash", "Shift+Alt+?"], extension: "shortcuts" },
        { label: "Command line", action: "cli", commands: [">", "Shift-Period"], extension: "cli" },
        { label: "Chart2Music", action: "chart2music", commands: ["Shift+Alt+Digit2", "Shift+Alt+2"], extension: "chart2music" },
        ],
        // Keys events captured by the chart normally trigger on keyup. Specify which keys will trigger on keydown,
        // allowing a user to hold said key down (which keeps generating events) to repeat the associated hotkey action. It is
        // not recommended to associate "toggle" actions with these keys.
        keysToRepeat: [
        "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight",
        "Up", "Down", "Left", "Right", "-", "_", "=", "+"
        ],
    },

systemMessages

• Description:
  Contains event objects as shortcuts that can be included by name in the dispatch of "notification" events, which display toasts. For example: stx.dispatch("notification", "logdeactivated"); where stx is a reference to the chart engine.
  See CIQ.ChartEngine~notificationEventListener for information on the properties the event object can contain.
• Type:
  object

Object Properties:

Default Value:

systemMessages: {
    copytoclipboard: {
        message: "Copied to clipboard.",
        type: "info",
        displayTime: 5
    },
    logdeactivated: {
        message: "Log scale has been deactivated due to a zero or negative value in your visible dataset.",
        type: "warning"
    },
    studynoteditable: {
        message: "This study is not editable",
        displayTime: 5
    },
    eldercannotadd: {
        message: "Elder Impulse study cannot be activated because a custom chart is already in use.",
        type: "info",
        displayTime: 3
    },
    gonogocannotadd: {
        message: "GoNoGo study cannot be activated because a custom chart is already in use.",
        type: "info",
        displayTime: 3
    },
    addAVWAP: {
        message: "Select AVWAP anchor time from the chart.",
        type: "info",
        displayTime: 0
    },
    removeAVWAP: {
        message: "Select AVWAP anchor time from the chart.",
        remove: true
    },
    changeperiodicity: {
        message: "Changing Periodicity may lose loaded data."
    },
    duplicatesymbol: {
        message: "The comparison symbol cannot be the same as the main series.",
        displayTime: 4,
        type: "error"
    },
    drawingsHidden: {
        message: "This chart contains drawings that are currently hidden. Press Hide All Drawings to toggle them visible.",
        displayTime: 4,
        type: "error"
    },
    drawingsRevealed: {
        message: "Drawings are no longer hidden while in drawing mode.",
        displayTime: 4,
        type: "error"
    }
},

marketDefinitionAPIs

• Description:
  Object containing specifications for market definition APIs.
  This object defines market definition endpoints along with optional extract and transform functions.
  Note: See defaultConfiguration.js for example implementations.
• Type:
  object

Object Properties:

Default Value:

marketDefinitionAPIs: {
    ...resources.marketDefinitionAPIs
},

marketDefinitionDefaultMapping

• Description:
  Include this symbol in the marketDefinitionMapping below to set a default mapping. This ensures all symbols retrieve their market definition from this API, except those explicitly defined.
  Note: See defaultConfiguration.js for example implementations.
• Type:
  string

Default Value:

marketDefinitionDefaultMapping: "#DEFAULT#",

marketDefinitionMapping

• Description:
  Object containing mappings of symbols to market definition API specifications. This object maps symbols to corresponding entries in the MarketDefinitionAPIs config.
  Note: See defaultConfiguration.js for example implementations.
• Type:
  object

Default Value:

marketDefinitionMapping: {
    ...resources.marketDefinitionMapping
},

marketFactory

• Description:
  Set a market factory to the chart to make it market-hours aware. Otherwise, it will operate in 24x7 mode. This is required for the simulator or if you intend to enable extended hours trading zones.
• Type:
  function

Default Value:

marketFactory: CIQ.Market.Symbology.factory,

chartEngineParams

• Description:
  All configuration parameters for chart engine except for the container property.
• Type:
  object

Object Properties:

Refer to CIQ.ChartEngine#preferences for additional preference properties.

Default Value:

chartEngineParams: {
    preferences: {
        labels: false,
        currentPriceLine: true,
        whitespace: 0,
        displayCrosshairsWithDrawingTool: false
    }
},

quoteFeeds

• Description:
  An array of objects containing properties for attaching automated quote feeds to the chart, managing initial load, pagination, and updates at preset intervals.
  See the Quick Start Connect a Live Data Source tutorial for more information on quote feeds.
• Type:
  object[]

Object Properties:

Default Value:

quoteFeeds: resources.quoteFeed ? [
    {
        quoteFeed: resources.quoteFeed,
        behavior: { refreshInterval: 1, backgroundRefreshInterval: 5, bufferSize: 250 },
        // filter: () => {}
    }
] : [],

selector

• Description:
  A collection of CSS selectors used to reference DOM nodes representing chart elements named by object properties.
• Type:
  object

Default Value:

selector: {
    sideNav: ".ciq-sidenav",
    sidePanel: "cq-side-panel",
    lookupComponent: ".ciq-search cq-lookup",
    studyLegend: "cq-study-legend",
    timeSpanEvent: ".stx-markers cq-item.span-event, .ciq-markers .switch-item.item[stxtap*=TimeSpanEvent]",
    markersMenuItem: ".stx-markers cq-item, .ciq-markers .switch-item.item",
    themesMenuItem: "cq-themes",
    tfcTradePanel: ".stx-trade-panel",
    tfcToggle: ".stx-trade",
},

themes

• Description:
  Provides the theme parameters for the chart.
• Type:
  object

Object Properties:

Default Value:

themes: {
    builtInThemes: { "ciq-day": "Day", "ciq-day.redgreen": "Day (red-green friendly)", "ciq-night": "Night", "ciq-night.redgreen": "Night (red-green friendly)" },
    defaultTheme: "ciq-night",
    /**
     * Optional override storage location of current theme and any custom defined themes. Takes a function with get, set, and remove methods
     * If not defined, then the component will use CIQ.NameValueStore for storage.
     */
    nameValueStore: resources.nameValueStore
},

displayStyleIcons

• Description:
  Use to style icons in the chart style menu.
• Type:
  boolean

Default Value:

displayStyleIcons: true, // use style icons in the chart style menu

menuViewConfig

• Description:
  Specifies the parameters used in WebComponents.Views#initialize, such as the name/value store used to save and retrieve the chart views.
• Type:
  object

Default Value:

menuViewConfig: {
    // configure view menu options
},

menuStudiesConfig

• Description:
  Configuration settings for the studies menu. See WebComponents.Studies#initialize.
• Type:
  object

Object Properties:

Default Value:

menuStudiesConfig: { 	// All studies available are by default included in the studies menu
    excludedStudies: {
        "stochastics": true,
    },   // list of studies to exclude
    alwaysDisplayDialog: { ma: true },
    /*dialogBeforeAddingStudy: {"rsi": true} // here's how to always show a dialog before adding the study*/
},

drawingTools

• Description:
  Specifies the tools that appear on the drawing tool palette.
• Type:
  object

Object Properties:

Default Value:

drawingTools: [
    { type: "dt", tool: "annotation", group: "text", label: "Annotation", shortcut: "w" },
    { type: "dt", tool: "arrowline", group: "lines", label: "Arrow", shortcut: "a" },
    { type: "dt", tool: "line", group: "lines", label: "Line", shortcut: "l" },
    { type: "dt", tool: "horizontal", group: "lines", label: "Horizontal", shortcut: "o" },
    { type: "dt", tool: "vertical", group: "lines", label: "Vertical", shortcut: "p" },
    { type: "dt", tool: "rectangle", group: "markings", label: "Rectangle", shortcut: "r" },
    { type: "dt", tool: "trendline", group: "lines", label: "Trend Line", shortcut: "t" },
    { type: "dt", tool: "callout", group: "text", label: "Callout", feature: "advanced" },
    { type: "dt", tool: "ray", group: "lines", label: "Ray", feature: "advanced" },
    { type: "dt", tool: "continuous", group: "lines", label: "Continuous", feature: "advanced" },
    { type: "dt", tool: "crossline", group: "lines", label: "Crossline", feature: "advanced" },
    { type: "dt", tool: "channel", group: "lines", label: "Channel", feature: "advanced" },
    { type: "dt", tool: "freeform", group: "lines", label: "Doodle", feature: "advanced" },
    // { type: "dt", tool: "check", group: "markings", label: "Check", feature: "advanced" }, Deprecated
    // { type: "dt", tool: "focusarrow", group: "markings", label: "Focus", feature: "advanced" }, Deprecated
    // { type: "dt", tool: "heart", group: "markings", label: "Heart", feature: "advanced" }, Deprecated
    // { type: "dt", tool: "star", group: "markings", label: "Star", feature: "advanced" }, Deprecated
    // { type: "dt", tool: "xcross", group: "markings", label: "Cross", feature: "advanced" }, Deprecated
    { type: "dt", tool: "ellipse", group: "markings", label: "Ellipse", shortcut: "e", feature: "advanced" },
    { type: "dt", tool: "retracement", group: "fibonacci", label: "Fib Retracement", feature: "advanced" },
    { type: "dt", tool: "fibprojection", group: "fibonacci", label: "Fib Projection", feature: "advanced" },
    { type: "dt", tool: "fibarc", group: "fibonacci", label: "Fib Arc", feature: "advanced" },
    { type: "dt", tool: "fibfan", group: "fibonacci", label: "Fib Fan", feature: "advanced" },
    { type: "dt", tool: "fibtimezone", group: "fibonacci", label: "Fib Time Zone", feature: "advanced" },
    { type: "dt", tool: "elliottwave", group: "technicals", label: "Elliott Wave", feature: "advanced" },
    { type: "dt", tool: "speedarc", group: "technicals", label: "Speed Resistance Arc", feature: "advanced" },
    { type: "dt", tool: "speedline", group: "technicals", label: "Speed Resistance Line", feature: "advanced" },
    { type: "dt", tool: "gannfan", group: "technicals", label: "Gann Fan", feature: "advanced" },
    { type: "dt", tool: "timecycle", group: "technicals", label: "Time Cycle", feature: "advanced" },
    { type: "dt", tool: "gartley", group: "technicals", label: "Gartley", feature: "advanced" },
    { type: "dt", tool: "pitchfork", group: "technicals", label: "Pitchfork", feature: "advanced" },
    { type: "dt", tool: "average", group: "statistics", label: "Average Line", feature: "advanced" },
    { type: "dt", tool: "measurementline", group: "statistics", label: "Measurement Line", feature: "advanced" },
    { type: "dt", tool: "regression", group: "statistics", label: "Regression Line", feature: "advanced" },
    { type: "dt", tool: "quadrant", group: "statistics", label: "Quadrant Lines", feature: "advanced" },
    { type: "dt", tool: "tirone", group: "statistics", label: "Tirone Levels", feature: "advanced" },
    { type: "dt", tool: "volumeprofile", group: "statistics", label: "Volume Profile", feature: "advanced" },
],

drawingToolGrouping

• Description:
  A list of categories used to organize the drawing tools based on the type of drawings the tools create. See the group property in drawingTools
• Type:
  string[]

Default Value:

drawingToolGrouping: [
    "All",
    "Favorites",
    "Fibonacci",
    "Lines",
    "Markings",
    "Statistics",
    "Technicals",
    "Text"
],

menuRendering

• Description:
  Specifies the functions that process the chart menu item types.
• Type:
  object

Object Properties:

Note: The rendering markup for menu dropdowns in web components (starting with version 9.1) is defined in the 🔗cq-dropdown component's itemTemplate function, located in dropdown.js.

Default Value:

menuRendering: {
    item: ({ label, cmd, cls }) => `
        <cq-item ${cls ? `class="${cls}"` : "" } stxtap="${cmd}">${label}</cq-item>`,
    checkbox: ({ label, cmd, cls }) => `
        <cq-item
            ${cls ? `class="${cls}"` : ""}
            stxsetget="${cmd}">${label}<span class="ciq-switch ciq-active"><span></span></span>
        </cq-item>`,
    dt: ({ tool, group, label, shortcut, feature }) => `<cq-item
            role="radio"
            tabindex="-1"
            class="ciq-tool"
            cq-tool="${tool}"
            ${shortcut ? `cq-tool-shortcut="${shortcut}"` : ""}
            cq-tool-group="${group}"
            stxtap="tool('${tool}')"
            ${feature ? `feature="${feature}"` : ""}
        >
            <span class="icon ${tool}"></span>
            <span id="drawing_palette_${label.replace(/ /g, '')}">
                <span label role="none">${label}</span>
                <em class="ciq-screen-reader help-instr">(Help available, press question mark key)</em>
                <cq-help help-id="drawing_palette_${tool}" aria-hidden="true"></cq-help>
            </span>
        </cq-item>
    `
},

getMenu

• Description:
  A function that returns the items of a chart menu configuration (such as menuPeriodicity et al. above) as an array of DOM nodes.
  Type:
  function

Default Value:

getMenu(name, sort) {
    let menu = this[name];
    if (!menu) return;
    if (sort === true) sort = (a, b) => (a.label > b.label ? 1 : -1);
    if (typeof sort === "function") menu.sort(sort);
    return this[name].map((options) => this.menuRendering[options.type || "item"](options, this));
},

plugins

• Description:
  The initial configuration of the chart plug-ins.
  Note: The application must import the plug-in source code files from the plugins folder.
• Type:
  Object

Object Properties:

Note:

• All plug-in configuration objects can also include a moduleName property to specify the class or constructor function used for instantiation. Refer to the tfc configuration object in the default configuration below for an example. By default, the property name, with the first letter capitalized, identifies the class or constructor function.

• All plug-in configuration objects can include a postInstall property that defines a function executed after the plug-in is instantiated. This function takes an object parameter: { uiContext, extension }, where uiContext is the chart CIQ.UI.Context and extension is the instantiated plug-in. See the termStructure configuration object in the default configuration below for an example.

Default Value:

Refer to your defaultConfiguration.js file for the configuration of the plugins properties.

channels

• Description:
  Specifies component communication channels, allowing you to listen, write, and read channel changes. For example, using the chart engine as a reference, you can listen to the crosshair being set or unset using:

  CIQ.UI.BaseComponent.prototype.channelSubscribe(
      stxx.uiContext.config.channels.crosshair,
      (value) => console.log(value),
      stxx
  )
  

• Type:
  object

Default Value:

channels: {
    lookup: "channel.lookup",
    crosshair: "layout.crosshair",
    headsUp: "layout.headsUp",
    sidenav: "layout.sidenav",
    tableView: "channel.tableView",
    drawing: "channel.drawing",
    drawingPalettes: "channel.drawingPalettes",
    breakpoint: "channel.breakpoint",
    containerSize: "channel.containerSize",
    sidenavSize: "channel.sidenavSize",
    sidepanelSize: "channel.sidepanelSize",
    pluginPanelHeight: "channel.pluginPanelHeight",
    tfc: "channel.tfc",
    technicalviews: "channel.technicalviews",
    technicalinsights: "channel.technicalinsights",
    dataLoader: "channel.dataLoader",
    dialog: "channel.dialog",
    keyboardNavigation: "channel.keyboardNavigation",
    class: "channel.componentClass"
},

dialogs

• Description:
  Specifies the tags that contain the web component markup for the chart dialog boxes. Also specifies attributes of the dialog tags.
• Type:
  object

Default Value:

dialogs: {
    aggregation: {
        tag: "cq-aggregation-dialog",
        attributes: {
            "cq-title": "Aggregation Dialog"
        }
    },
    dataLoader: {
        tag: "cq-data-dialog",
        attributes: {
            "cq-title": "Import Data",
            "cq-close-button": "false"
        }
    },
    drawingContext: {
        tag: "cq-drawing-context",
        attributes: {
            "cq-close-button": "false"
        }
    },
    fibSettings: {
        tag: "cq-fib-settings-dialog",
        attributes: {
            "cq-title": "Settings",
            "cq-close-button": "false"
        }
    },
    language: {
        tag: "cq-language-dialog",
        attributes: {
            "cq-title": "Choose language"
        }
    },
    lookup: {
        tag: "cq-lookup-dialog",
        attributes: {
            "cq-title": "Symbol Lookup",
            "cq-maintain-case": "false" // When set to true maintains case of entered symbol.
        }
    },
    measurementlineSettings: {
        tag: "cq-measurementline-settings-dialog",
        attributes: {
            "cq-title": "Measurement Line Settings",
            "cq-close-button": "false"
        }
    },
    share: {
        tag: "cq-share-dialog",
        attributes: {
            "cq-title": "Share"
        }
    },
    signaliq: {
        tag: "cq-signaliq-dialog",
        attributes: {
            "cq-title": "New Signal"
        }
    },
    study: {
        tag: "cq-study-dialog",
        attributes: {
            "cq-title": "Study",
            "cq-close-button": "false",
            "cq-study-axis": true,
            "cq-study-panel": "alias"
        }
    },
    studyContext: {
        tag: "cq-study-context",
        attributes: {
            "cq-close-button": "false"
        }
    },
    theme: {
        tag: "cq-theme-dialog",
        attributes: {
            "cq-title": "Create Custom Theme"
        }
    },
    timezone: {
        tag: "cq-timezone-dialog",
        attributes: {
            "cq-title": "Choose Timezone",
            "cq-description": "To set your timezone use the location button below, or scroll through the following list..."
        }
    },
    view: {
        tag: "cq-view-dialog",
        attributes: {
            "cq-title": "Save View"
        }
    },
    volumeprofileSettings: {
        tag: "cq-volumeprofile-settings-dialog",
        attributes: {
            "cq-title": "Volume Profile Settings",
            "cq-close-button": "false"
        }
    },
    yaxisContext: {
        tag: "cq-yaxis-context",
        attributes: {
            "cq-close-button": "false",
            "cq-allow-transform": "true",
            "cq-transform-lock-scale": "true"
        }
    }
}

eventMarkersImplementation

• Description:
  A class or constructor function that implements chart event markers. See the example implementation in the markersSample.js file, located in the example/markers folder of the library. Also, see the Markers tutorial.
• Type:
  function

Default Value:

eventMarkersImplementation: resources.markerFeed,

scrollbarStyling

• Description:
  Specifies the scroll bar styling implementation for the cq-scroll component. See the example implementation in the perfect-scrollbar.esm.js file, located in the js/thirdparty folder of your library. Change the default implementation only if different scrollbar styling is required.
• Type:
  object

Default Value:

scrollbarStyling: {
    refresh(component, options = { suppressScrollX: true }) {
        if (typeof resources.scrollStyle !== "function") return;
        if (!component.__ps) {
            component.__ps = new resources.scrollStyle(component, options);
            component.__ps.scrollbarX.setAttribute('tabindex', -1);
            component.__ps.scrollbarY.setAttribute('tabindex', -1);
        }
        component.__ps.update(component);
    },
    destroy(component) {
        if (component.__ps) component.__ps.destroy();
    }
},

chartSharing

• Description:
  See the Chart Sharing tutorial for more information.
• Type:
  function

Default Value:

chartSharing: resources.chartSharing,

multiChartCopySymbol

• Description:
  Copy symbol from the reference chart when a new chart is added. A true value copies active chart symbol, false use initialSymbol, null leaves chart without symbol
• Type:
  boolean

Default Value:

multiChartCopySymbol: null,

multiChartLoadMsg

• Description:
  A message to display when the chart is created without a symbol.
• Type:
  string

Default Value:

multiChartLoadMsg: "Click to load a symbol",

restoreOffgridCharts

• Description:
  Restores charts temporarily placed off-grid due to grid size reduction on multi-chart grid expansion.
• Type:
  boolean

Default Value:

restoreOffgridCharts: true,

nameValueStore

• Description:
  Class to access and store chart data, including preferences, layout, and drawings.
• Type:
  function

Default Value:

nameValueStore: resources.nameValueStore,

onWebComponentsReady

• Description:
  Optional function to call when web components have initialized.
• Type:
  function

Default Value:

onWebComponentsReady: () => {},

onEngineReady

• Description:
  Callback to execute prior layout import or instrument loading after addOns and plugins have been initialized.
• Type:
  function

Default Value:

onEngineReady: (stx) => {},

onChartReady

• Description:
  Callback to execute when the chart is loaded for the first time.
• Type:
  function

Default Value:

onChartReady: (stx) => {},

onMultiChartEvent

• Description:
  Callback to execute on multi-chart events.
• Type:
  function

Default Value:

onMultiChartEvent: (type, details) => {},

soloActive

• Description:
  In the multi-chart setting, expand the active chart by hiding all others for the following settings.
• Type:
  object

Default Value:

soloActive: {
    onDraw: {
        // onDraw is no longer invoked
        shouldSolo(stx) {
            // should active chart solo when drawing is enabled for chart with stx parameter
            // Uncomment following if above medium breakpoint in chart solo on drawing is required
            // const { width, height } = stx.container.getBoundingClientRect();
            // return width < 584 || height < 350;
            return false;
        },
        // notification message
        notify: {
            message: "Click on the draw toggle again to close drawing tools and return to grid view",
        }
    },
    onTFC: {
        shouldSolo(stx) {
            const { width, height } = stx.container.getBoundingClientRect();
            return width < 300 || height < 250;
        },
        notify: {
            message: "Chart has been maximized to make it easier to set trade prices.",
        }
    },
    onTechnicalInsights: {
        notify: {
            message: "Chart has been soloed for plugin use. Disable plugin to restore chart grid.",
        }
    },
    onTechnicalViews: {
        notify: {
            message: "Chart has been soloed for plugin use. Disable plugin to restore chart grid.",
        }
    }
},

useQueryString

• Description:
  Extracts a symbol from a URL based on the query string. Used in conjunction with updateFromQueryString to load the initial symbol. A common use case is opening a chart from a link; for example, user clicks a symbol in a quote list to open a pop-up chart.
• Type:
  object

Default Value:

useQueryString: {
    symbolObject: {
        symbol: "symbol",
        name: "name",
        exchDisp: "exchDisp"
    },
},

updateFromQueryString

• Description:
  Loads the symbol provided by useQueryString and then updates the initialSymbol property and updates the restore property to restore.symbol = false.
• Type:
  function

Default Value:

updateFromQueryString() {
    if (!this.useQueryString) return;
    const queryObj = CIQ.qs();
    const symbolObject = Object.entries(this.useQueryString.symbolObject)
        .reduce((acc, [key, val]) => {
            const value = queryObj[val];
            if (value !== undefined) acc[key] = value;
            return acc;
        }, {});
    if (symbolObject.symbol) {
        this.initialSymbol = symbolObject;
        if (this.restore) { // do not restore symbol use one set in initialSymbol
            this.restore = { ...this.restore, symbol: false };
        }
    }
},

ariaActive

• Description:
  The list of chart elements that should be exposed to the screen reader instead of hidden by default.
• Type:
  object[]

Default Value:

ariaActive: null,

studyOutputAliasList

• Description:
  Map study output names for tooltip.
• Type:
  object

Default Value:

studyOutputAliasList: {
    // Study Name: {current study output: new output}
    "Aroon Osc": { "Aroon Oscillator": "" },
    "Boll %b": {"%b": ""},
    "Boll BW": {"Bandwidth": ""},
    "COG": { "Center of Gravity": "" },
    "Donchian Channel": {"Donchian High": "High", "Donchian Low": "Low", "Donchian Median": "Median"},
    "Klinger": {"KlingerSignal": "Signal"},
    "PMO": { "PMOSignal": "Signal" },
    "Prime Number Bands": {"Prime Bands Bottom": "Bottom", "Prime Bands Top": "Top", },
    "Pring KST": {"KST": "", "KSTSignal": "Signal"},
    "Rel Vig": {"RelVigSignal": "Signal"}
},

colorPicker

• Description:
  Settings for the coloPicker web component.
• Type:
  object

Default Value:

colorPicker: {
    showOpacityControls: true
    },

minimizeOffscreenQuotes

• Description:
  Convenience function to minimize offscreen data requested by the chart quote feed.
• Type:
  function

Default Value:

minimizeOffscreenQuotes({ multiplier = 1, bufferSize = 0, bufferSizeIsMultiplier } = {}) {
    Object.assign(this.quoteFeeds[0].behavior, { bufferSize, bufferSizeIsMultiplier, dynamicBuffer: true });
    this.chartEngineParams = { ...this.chartEngineParams, baseTickMultiplier: multiplier };

createChart

• Description:
  Function to create a new chart. Returns a CIQ.ChartEngine instance.
• Type:
  function

Default Value:

createChart: function(container) {
    this.updateFromQueryString();
    const config = this;
    if(CIQ.UI) return (new CIQ.UI.Chart()).createChartAndUI({ container, config }).stx;
    return CIQ.ChartEngine.create({ container, config });
}

Implementation

A configuration object is an essential part of your charting application, and implementing it is straightforward. First, create the object with a function call, then use its createChart property to set up a chart with the configuration settings.

getConfig

The default configuration object is defined in the js/defaultConfiguration.js file within a function named getConfig; this function returns the default configuration object.

As an ES6 module, defaultConfiguration.js exports the getConfig function as its default export.

Import getConfig into your application as follows:

import getDefaultConfig from "./js/defaultConfiguration.js";

and then call the function to get a default configuration object:

const config = getDefaultConfig();

getConfig parameters

The getConfig function signature is:

function getConfig(resources = {})

The resources object can have the following properties:

• quoteFeed — A quote feed object that will be attached to the chart engine. See CIQ.ChartEngine#attachQuoteFeed.
• forecastQuoteFeed — A quote feed object used for data forecasting. See CIQ.PlotComplementer#setQuoteFeed.
• markerFeed — A reference to a class or contructor function that implements chart event markers. See examples/markers/markersSample.js for an example.
• scrollStyle — A scrollbar styling implementation for the cq-scroll component, such as js/thirdparty/perfect-scrollbar.esm.js.
• nameValueStore — A function for interacting with a name/value store. If this property is not defined, CIQ.NameValueStore is used.
• emojiPicker — A popover interface for selecting and inserting emojis. Used by CIQ.SignalIQ.

The values of the object properties can be provided by imports from other ES6 modules, for example:

// Access resources.
import quotefeed from "./examples/feeds/quoteFeedSimulator.js";
import forecastfeed from "./examples/feeds/quoteFeedForecastSimulator.js";
import marker from "./examples/markers/markersSample.js";
import PerfectScrollbar from "./js/thirdparty/perfect-scrollbar.esm.js";
import remoteStore from "./custom/remoteNameValueStore.js";
import EmojiPopover from "./js/thirdparty/emoji-popover.es.js";

// Access the getConfig function.
import getDefaultConfig from "./js/defaultConfiguration.js";

// Get a configuration object.
const config = getDefaultConfig({
    markerFeed: marker.MarkersSample,
    scrollStyle: PerfectScrollbar,
    emojiPicker: EmojiPopover,
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed,
    nameValueStore: CIQ.NameValueStore
});

Using CreateChart

The createChart and createChartAsync properties in the default configuration object are functions that generate a chart using the configuration from the getConfig function.

Note: createChartAsync was introduced in v9.8.0 and enables the UI to load asynchronously, helping to mitigate the perception of slow chart loading.

Call createChart or createChartAsync after you have created a configuration object.

Example:

const config = getDefaultConfig({
    markerFeed: marker.MarkersSample,
    scrollStyle: PerfectScrollbar,
    emojiPicker: EmojiPopover,
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed,
    nameValueStore: CIQ.NameValueStore
});

let stxx = config.createChart();

Here's the default configuration of createChart and createChartAsync:

createChart: function (container) {
    return this.createChartAsync(container, null);
},

createChartAsync: function (container, callback) {
    this.updateFromQueryString();
    const config = this;
    const isAsync = callback !== null;
    if (CIQ.UI) return (new CIQ.UI.Chart()).createChartAndUI({ container, config, callback, isAsync }).stx;
    return CIQ.ChartEngine.create({ container, config });
}

When the CIQ.UI namespace is available, createChart calls CIQ.UI.Chart#createChartAndUI. Otherwise, the function calls CIQ.ChartEngine.create.

You can add the CIQ.UI namespace to your application by importing componentUI.js or component.js, for example:

import { CIQ } from "./js/components.js";

The container parameter of createChart is optional. The parameter references the HTML element that contains the user interface elements of the chart. If a container argument is not provided:

• CIQ.UI.Chart#createChartAndUI uses document.body
• CIQ.ChartEngine.create queries the DOM for the HTML element that contains the chart, ultimately using document.body if a container cannot be found

The createChart function provides CIQ.UI.Chart#createChartAndUI or CIQ.ChartEngine.create with a reference to the configuration object.

You can also call CIQ.UI.Chart#createChartAndUI or CIQ.ChartEngine.create directly instead of using createChart.

stx.uiContext.config

When CIQ.UI.Chart#createChartAndUI is used to create the chart — either directly or through config.createChart — the configuration object is attached to the chart UI context which is attached to the chart engine; and so, the configuration can be accessed in your application as follows:

// Destructure the enabledAddOns property of the configuration object.
// stx is a reference to the chart engine.
const { enabledAddOns: chartAddOns } = stx.uiContext.config;

Customization

The default configuration — including addOns and plugins — can be customized without editing the contents of defaultConfiguration.js.
Pass resources to the getConfig function from defaultConfiguration.js to set configuration values. You can also modify the returned object's properties to adjust the configuration.

Refer to the Default Configuration section above for a list of the default configuration object's properties and values.

Custom getConfig parameters

The resources parameter of the getConfig function modifies the following properties of the default configuration object:

• 🔗 quoteFeeds[0].quoteFeed
• 🔗 addOns.forecasting.quoteFeed
• 🔗 eventMarkersImplementation
• 🔗 scrollbarStyling

See the getConfig parameters section.

You can provide custom resources by creating your own ES6 modules, for example:

// Access the custom resources.
import myQuotefeed from "./customizations/customQuoteFeed.js";
import myForecastfeed from "./customizations/customQuoteFeedForecastSimulator.js";
import myMarkers from "./customizations/customMarkers.js";
import myScrollbarStyle from "./customizations/customScrollbarStyle.js";

// Access the getConfig function.
import getDefaultConfig from "./js/defaultConfiguration.js";

// Create a configuration object by calling the function with the custom resources.
const config = getDefaultConfig({
    quoteFeed: myQuotefeed,
    forecastQuoteFeed: myForecastfeed,
    markerSample: myMarkers,
    scrollStyle: myScrollbarStyle
});

Any features you're not using can be excluded from the argument object; for example forecastQuoteFeed, markerSample, or scrollStyle. You can even exclude quoteFeed if you're pushing data to the chart (see the Streaming: Asynchronous Data Feeds tutorial) or displaying static data using the initalData parameter.

See the following for examples and information on how to create custom implementations of resources:

• quoteFeed — examples/feeds/quoteFeedSimulator.js and the Data Integration: Quote Feeds tutorial
• forecastQuoteFeed — examples/feeds/quoteFeedForecastSimulator.js
• markerSample — examples/markers/markersSample.js and the Markers tutorial
• scrollStyle — js/thirdparty/perfect-scrollbar.esm.js

Custom configuration object

The object returned by the getConfig function can be customized by adding or removing properties or by changing property values, for example:

import getDefaultConfig from "./js/defaultConfiguration.js";

const config = getDefaultConfig();

// Enable only the Range Slider and Table View addOns.
config.enabledAddons = {
    rangeSlider: true,
    tableView: true
}

// Change a setting of the Trade from Chart plug-in.
config.plugins.tfc.allowUniqueAccountConstruction = true;

Important:

• Customizations must be made before calling createChart, or using CIQ.UI.Chart#createChartAndUI or CIQ.ChartEngine.create. The configuration object returned by getConfig is the same one passed to CIQ.UI.Chart#createChartAndUI or CIQ.ChartEngine#create via the createChart function. Therefore, any customizations will be reflected in both references (see the createChart default configuration).

• getConfig returns a unique object each time the function is called, but the same resources can be passed as arguments in multiple function calls. Any changes to resource objects are reflected in all configuration objects that reference the resources. See the getConfig Parameters section for information on how resources are assigned to configuration object properties.

Custom configuration module

Your custom configuration is less likely to be disrupted by future upgrades if all configuration changes are external to the defaultConfiguration.js file. Customize the object returned by getConfig rather than change defaultConfiguration.js.

Consider creating a module for configuration customizations. For example, in a folder named customizations located in the root folder of your library, create a file named customConfiguration.js with the following contents:

// Import the default getConfig function.
import getDefaultConfig from "../js/defaultConfiguration.js";

// Create a custom getConfig function.
function getConfig(resources = {}) {

    // Get the default configuration object.
    const config = getDefaultConfig(resources);

    // Customize the default configuration.
    config.enabledAddOns = {
        extendedHours: true,
        fullScreen: true,
        rangeSlider: true,
        tableView: true,
        tooltip: true
    }

    /* More configuration changes here. */

    // Return the custom configuration object.
    return config;
}

// Export the custom getConfig function.
export default getConfig;

Then import your custom configuration and call the getConfig function (with or without arguments) to get a configuration object:

import getCustomConfig from "./customizations/customConfiguration.js";

const config = getCustomConfig({
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed,
    markerSample: marker.MarkersSample,
    scrollStyle: PerfectScrollbar
});

Customization examples

The following examples demonstrate how to customize the configuration object. The examples assume a variable named "config" has been assigned a reference to the default configuration object, for example:

const config = getDefaultConfig();

Note: The extendedConfig object in defaultConfiguration.js includes extra customization parameters for the chart. Since it extends the defaultConfig object, you can access these properties directly from your template without additional steps. See your defaultConfiguration.js file for reference.

Display

Only include the dropdown's heading and the first 5 display types. Refer to extendedConfig.menus.display in defaultConfiguration.js for the full display configuration:

config.menus.display.content = config.menus.display.content.slice(0, 6);

Rename the "Candle" display type:

config.menus.display.content.find((item) => item.label === "Candle").label = "Candle Stick";

Groups

Rename the "5D" range label to "5 Day":

config.group.menus.content.find((item) => item.label === "5D").label = "5 Day";

Display the "heading" by removing the className "hidden":

config.groups.range.content[0].className = "";

Initial symbol

See initialSymbol

config.initialSymbol = {
    symbol: "AMZN",
    name: "Amazon.com",
    exchDisp: "NASDAQ"
}

AddOn Examples

See addOns and enabledAddOns.

Recreate the list of enabled addOns:

config.enabledAddOns: {
        animation: false,
        continuousZoom: false,
        forecasting: false,
        outliers: false,
        dataLoader: true,
        extendedHours: true,
        fullScreen: true,
        inactivityTimer: true,
        rangeSlider: true,
        shortcuts: true,
        tableView: true,
        tooltip: true
    },

Add an addOn to the default list:

config.enabledAddOns.tooltip = true;

Disable a default addOn:

config.enabledAddOns.rangeSlider = false;

Range slider

config.addOns.rangeSlider.height = "10rem";

Tooltip

config.addOns.tooltip = {
    ohl: false,
    volume: true,
    series: true,
    studies: false
}

Table view

config.addOns.tableView = {
    minColumnWidth: "100px",
    coverUIMaxWidth: "2000",
    usePreviousCloseForChange: false
}

Plug-in properties

See plugins.

Trade from Chart

config.plugins.tfc.allowUniqueAccountConstruction = true;

Time span event panel

Object.assign(config.plugins.timeSpanEventPanel, {
    alwaysZoom: false,
    showTooltip: false,
    infoPanel: {
        singleEvent: "panel",
        durationEvent: "main",
        spanEvent: "panel"
    }
});

config.plugins.timeSpanEventPanel.customConstants = {
    SPACING: 30,
    RADIUS_DEFAULT: 15,
    RADIUS_HIGHLIGHT: 20,
    RADIUS_SUBCHILDREN: 8
};

Market Depth

Object.assign(config.plugins.marketDepth, {
    step: false,
    shadeOpacity: .35,
    tension: 1,
    heatmapSize: true,
    headsUp: true,
    bidPeakColor: "#0f0",
    bidColor: "#0f0",
    bidBaseColor: "#00f",
    askPeakColor: "#ff0",
    askColor: "#ff0",
    askBaseColor: "#f00",
    pattern: "solid",
    width: 2,
    heightFactor: 1,
    bidVolumeColor: "#0ff",
    askVolumeColor: "#f0f",
    heatmapSize: true,
    heatmapBlockHeight: 1
});

Visual Earnings

config.plugins.visualEarnings = {
    container: ".ciq-dropdowns",
    markup: `<cq-menu class="ciq-menu collapse">
                 <span>Visual Earnings</span>
                 <cq-menu-dropdown>
                     <cq-menu-container cq-name="visualEarnings"></cq-menu-container>
                 </cq-menu-dropdown>
             </cq-menu>`,
    menu: [
        {
            type: "checkbox",
            label: "Price Horizon: EPS",
            cmd: "Layout.VisualEarningsFlag('ph_eps')"
        },
        {
            type: "checkbox",
            label: "Price Horizon: Revenue",
            cmd: "Layout.VisualEarningsFlag('ph_rev')"
        },
        {
            type: "checkbox",
            label: "Price Horizon: Historical",
            cmd: "Layout.VisualEarningsFlag('ph_historical')"
        },
        {
            type: "item",
            label: "Miss/Beat: Earnings",
            cmd: "VisualEarnings.toggle('earnings')"
        },
        {
            type: "item",
            label: "Miss/Beat: Revenue",
            cmd: "VisualEarnings.toggle('revenue')"
        },
        { type: "item", label: "Data Table", cmd: "VisualEarnings.toggle('data')" }
    ]
}

Studies

See menuStudiesConfig.

• Exclude the Chaikin Volatility and Chande Momentum Oscillator studies from the Studies menu
• Display the settings dialog for the MACD and AVWAP studies after the studies have been added to the chart
• Display the settings dialog for the Alligator study before the study is added to the chart

config.menuStudiesConfig = {
    excludedStudies: { "Chaikin Volatility": true, "Chande Momentum Oscillator": true },
    alwaysDisplayDialog: { macd: true, AVWAP: true },
    dialogBeforeAddingStudy: {"Alligator": true}
}

Scalar values

Set the restore flag:

config.restore = false;

Function values

Set the loadError function ofonNewSymbolLoad:

config.onNewSymbolLoad.loadError = (err, uiContext) => console.log("Error loading symbol: " + err);

Array values

Hotkeys

See hotkeys.

Add a keystroke alternative to the Table View:

config.hotkeyConfig.hotkeys[config.hotkeyConfig.hotkeys.length - 1].commands.push("Shift+KeyT");

Drawing tools

See drawingTools.

Change the label of the Annotation tool:

config.drawingTools[0].label = "Text";

Chart ID

Charts make use of a configuration property that is not part of the default configuration object: chartId.

The chartId property is a string that uniquely identifies a chart. In a multi-chart environment, chartId ensures that each chart can be uniquely referenced, and data related to a chart can be identified.

In particular, chartId is used to save and retrieve the chart layout, preferences, drawings, and markers state. See the following:

• CIQ.ChartEngine.getSaveLayout
• CIQ.ChartEngine.getSavePreferences
• CIQ.ChartEngine.getSaveDrawings
• CIQ.ChartEngine.getRetoggleEvents

Data for all charts in a multi-chart application is saved in the same local storage; chartId makes identifying the data for each chart possible.

You assign a value to the chartId property after you've created a configuration object (see the Implementation topic), for example:

config.chartId = "MyChart";

When working with multiple charts, you can create a configuration object for each chart and assign a unique value to chartId for each object, for example:

const config1 = getDefaultConfig({
    markerSample: marker.MarkersSample,
    scrollStyle: PerfectScrollbar,
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed
});
config1.chartId = chart1;

const config2 = getDefaultConfig({
    markerSample: marker.MarkersSample,
    quoteFeed: optionfeed,
});
config2.chartId = chart2;

But for all configuration objects, chartId must be assigned a value before calling config.createChart().

Note: Sharing a configuration object among multiple charts should be avoided in most cases. Unexpected results can occur when properties of the shared object are changed.

stx.uiContext.config.chartId

When config.createChart is used to create the chart, chartId can be accessed in your application as follows:

// stx is a reference to the chart engine.
console.log(stx.uiContext.config.chartId);

See the note in the Using CreateChart section of the Implementation topic for more information.

Next steps

• Examine the defaultConfiguration.js file in the js folder of your library.