Chart Configuration

Object properties

Default value

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

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.

See the createChart section of the Implementation topic for more information.

Default value

undefined

Note:

• Add-ons are configured in the addOns property.
• The application must import js/addOns.js, which contains the add-on source code.

Properties

Default value

{
    extendedHours: true,
    fullScreen: true,
    inactivityTimer: true,
    rangeSlider: true,
    tableView: true, // v8.1.0
    shortcuts: true, // v8.2.0
    tooltip: true // v8.2.0
}

• removeSeries — Called for each series on the chart to determine whether the series should be removed when a new primary symbol is loaded. The default implementation retains only study series.
• loadError — Called if an error occurs during the loading of a new primary symbol. The default implementation does nothing.

Default value

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

Default value

true

Note: The implementation provided as the default for this property is defined in examples/feeds/symbolLookupChartIQ.js.

Default value

CIQ.ChartEngine.Driver.Lookup.ChartIQ

Properties

Default value

{
    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"] },
        // 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", commands: ["Tab"] },
        { label: "Tab to previous", action: "keyboardNavigatePrevious", commands: ["Shift+Tab"] },
        { label: "Select at tab", action: "keyboardNavigateClick", commands: ["Enter"] },
        // misc
        { label: "Pan to home", action: "home", commands: ["Home"] },
        { label: "Pan to start of loaded data", action: "end", commands: ["End"] },
        { 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: "Symbol Lookup", action: "symbolLookup", commands: ["Shift+Alt+KeyS"] },
        // AddOns and Plugins
        { label: "Open table view", action: "tableView", commands: ["Alt+KeyK"], extension: "tableView" }, // 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: "Keyboard Shortcuts", action: "shortcuts", commands: ["Shift+Alt+KeyK"], extension: "shortcuts" },
        /* Begin Technical Analysis only */
        { label: "Outliers", action: "outliers", commands: ["Shift+Alt+KeyO"], extension: "outliers" },
        /* End Technical Analysis only */
        { label: "Market Depth", action: "marketDepth", commands: ["Shift+Alt+KeyD"], extension: "marketDepth" },
        { label: "L2 Heat Map", action: "l2HeatMap", commands: ["Shift+Alt+KeyH"], extension: "marketDepth" },
        { label: "Trade From Chart", action: "tfc", commands: ["Shift+Alt+KeyT"], extension: "tfc" }
    ],
    keysToRepeat: [
        "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight",
        "Up", "Down", "Left", "Right", "-", "_", "=", "+"
    ]
}

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.

Default value

{
    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"
    }
}

Note: The sample implementation provided as the default for this property is defined in examples/markets/marketDefinitionsSample.js. Market definitions required by the implementation are defined in examples/markets/marketSymbologySample.js.

Default value

CIQ.Market.Symbology.factory

Default value

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

Object properties

Default value

[
    {
     	quoteFeed: resources.quoteFeed,
		behavior: { refreshInterval: 1, bufferSize: 200 },
 	}
]

Default value

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

Properties

Default value

{
    builtInThemes: { "ciq-day": "Day", "ciq-night": "Night" },
    defaultTheme: "ciq-night",
    nameValueStore: resources.nameValueStore // v8.2.0
}

Object properties

Default value

[
	{ type: "item", label: "1 D", cmd: "Layout.setPeriodicity(1,1,'day')", value: { period: 1, interval: 1, timeUnit: 'day'} },
	{ type: "item", label: "1 W", cmd: "Layout.setPeriodicity(1,1,'week')", value: { period: 1, interval: 1, timeUnit: 'week' } },
	{ type: "item", label: "1 Mo", cmd: "Layout.setPeriodicity(1,1,'month')", value: { period: 1, interval: 1, timeUnit: 'month' } },
	{ type: "separator", },
	{ type: "item", label: "1 Min", cmd: "Layout.setPeriodicity(1,1,'minute')", value: { period: 1, interval: 1, timeUnit: 'minute' } },
	{ type: "item", label: "5 Min", cmd: "Layout.setPeriodicity(1,5,'minute')", value: { period: 1, interval: 5, timeUnit: 'minute' } },
	{ type: "item", label: "10 Min", cmd: "Layout.setPeriodicity(1,10,'minute')", value: { period: 1, interval: 10, timeUnit: 'minute' } },
	{ type: "item", label: "15 Min", cmd: "Layout.setPeriodicity(3,5,'minute')", value: { period: 1, interval: 1, timeUnit: 'minute' } },
	{ type: "item", label: "30 Min", cmd: "Layout.setPeriodicity(1,30,'minute')", value: { period: 1, interval: 30, timeUnit: 'minute' } },
	{ type: "item", label: "1 Hour", cmd: "Layout.setPeriodicity(2,30,'minute')", value: { period: 2, interval: 30, timeUnit: 'minute' } },
	{ type: "item", label: "4 Hour", cmd: "Layout.setPeriodicity(8,30,'minute')", value: { period: 8, interval: 30, timeUnit: 'minute' } },
	{ type: "separator", },
	{ type: "item", label: "1 Sec", cmd: "Layout.setPeriodicity(1,1,'second')", value: { period: 1, interval: 1, timeUnit: 'second' } },
	{ type: "item", label: "10 Sec", cmd: "Layout.setPeriodicity(1,10,'second')", value: { period: 1, interval: 10, timeUnit: 'second' } },
	{ type: "item", label: "30 Sec", cmd: "Layout.setPeriodicity(1,30,'second')", value: { period: 1, interval: 30, timeUnit: 'second' } },
	{ type: "separator", },
	{ type: "item", label: "250 MSec", cmd: "Layout.setPeriodicity(1,250,'millisecond')", value: { period: 1, interval: 250, timeUnit: 'millisecond' } }
]

Object properties

Default value

[
	{ type: "radio", label: "Candle", cmd: "Layout.ChartType()", iconCls: "candle", value: "candle"},
	/* Begin Technical Analysis only */
	{ type: "radio", label: "Bar", cmd: "Layout.ChartType()", iconCls: "bar", value: "bar" },
	{ type: "radio", label: "Colored Bar", cmd: "Layout.ChartType()", iconCls: "colored-bar", value: "colored_bar"},
	/* End Technical Analysis only */
	{ type: "radio", label: "Line", cmd: "Layout.ChartType()", iconCls: "line", value: "line" },
	{ type: "radio", label: "Vertex Line", cmd: "Layout.ChartType()", iconCls: "vertex-line", value: "vertex_line" },
	{ type: "radio", label: "Step", cmd: "Layout.ChartType()", iconCls: "step", value: "step" },
	{ type: "radio", label: "Mountain", cmd: "Layout.ChartType()", iconCls: "mountain", value: "mountain" },
	/* Begin Technical Analysis only */
	{ type: "radio", label: "Baseline", cmd: "Layout.ChartType()", iconCls: "baseline-delta", value: "baseline_delta" },
	{ type: "radio", label: "Hollow Candle", cmd: "Layout.ChartType()", iconCls: "hollow-candle", value: "hollow_candle" },
	{ type: "radio", label: "Volume Candle", cmd: "Layout.ChartType()", iconCls: "volume-candle", value: "volume_candle" },
	{ type: "radio", label: "Colored HLC Bar", cmd: "Layout.ChartType()", iconCls: "colored-hlc", value: "colored_hlc" },
	{ type: "radio", label: "Scatterplot", cmd: "Layout.ChartType()", iconCls: "scatterplot", value: "scatterplot" },
	/* End Technical Analysis only */
	{ type: "radio", label: "Histogram", cmd: "Layout.ChartType()", iconCls: "histogram", value: "histogram" }
]

Note: The Begin Technical Analysis only/End Technical Analysis only comments delimit items that are included in the Technical Analysis / Advanced Charting package only. If you have the Core Charts package, your default configuration will not have these items.

Object properties

Default value

[
	{ type: "separator"},
	{ type: "radio", label: "Heikin Ashi", cmd: "Layout.ChartType()", iconCls: "heikinashi", value: "heikinashi" },
	{ type: "radio", label: "Kagi", cmd: "Layout.ChartType()", options: "Layout.showAggregationEdit('kagi')", iconCls: "kagi", value: "kagi" },
	{ type: "radio", label: "Line Break", cmd: "Layout.ChartType()", options: "Layout.showAggregationEdit('linebreak')", iconCls: "linebreak", value: "linebreak" },
	{ type: "radio", label: "Renko", cmd: "Layout.ChartType()", options: "Layout.showAggregationEdit('renko')", iconCls: "renko", value: "renko" },
	{ type: "radio", label: "Range Bars", cmd: "Layout.ChartType()", options: "Layout.showAggregationEdit('rangebars')", iconCls: "rangebars", value: "rangebars" },
	{ type: "radio", label: "Point & Figure", cmd: "Layout.ChartType()", options: "Layout.showAggregationEdit('pandf')", iconCls: "pandf", value: "pandf" },
]

Note: The chart aggregates are not included in the Core Charts package. If you have the Core Charts package, your default configuration will not have this property.

Object properties

Default value

[
    { type: "checkbox", label: "Range Selector", cmd: "Layout.RangeSlider()", cls: "rangeslider-ui" },
    { type: "checkbox", label: "Extended Hours", cmd: "Layout.ExtendedHours()", cls: "extendedhours-ui" },
    /* Begin Technical Analysis only */
    { type: "checkbox", label: "Hide Outliers", cmd: "Layout.Outliers()", cls: "outliers-ui" },
    { type: "checkbox", label: "Market Depth", cmd: "Layout.MarketDepth()", cls: "marketdepth-ui" }, // v8.2.0 cls changed from cryptoiq-ui
    { type: "checkbox", label: "L2 Heat Map", cmd: "Layout.L2Heatmap()", cls: "marketdepth-ui" }, // v8.2.0 cls changed from cryptoiq-ui
    /* End Technical Analysis only */
]

Note: The Begin Technical Analysis only/End Technical Analysis only comments delimit items that are included in the Technical Analysis / Advanced Charting package only. If you have the Core Charts package, your default configuration will not have these items.

Object properties

Default value

[
	{ type: "checkbox", label: "Log Scale", cmd: "Layout.ChartScale('log')" },
	{ type: "checkbox", label: "Invert", cmd: "Layout.FlippedChart()" },
]

Default value

{}

Properties

Default value

{
    excludedStudies: { // v8.2.0
        "stochastics": true, // Remove the simple stochastics study, which is replaced by Stochastics
    },
    alwaysDisplayDialog: { ma: true, AVWAP: true }
}

Object properties

Default value

[
	{ type: "item", label: "Shortcuts / Hotkeys", cmd: "Layout.showShortcuts(true)", cls: "shortcuts-ui" },
	{ type: "item", label: "Import Data", cmd: "Channel.write('dataLoader', true)", cls: "dataLoader-ui"}
]

Object properties

Default value

[
    { type: "range", label: "1D", cmd: "set(1,'today')" },
    { type: "range", label: "5D", cmd: "set(5,'day',30,2,'minute')" },
    { type: "range", label: "1M", cmd: "set(1,'month',30,8,'minute')" },
    { type: "range", label: "3M", cmd: "set(3,'month')", cls: "hide-sm" },
    { type: "range", label: "6M", cmd: "set(6,'month')", cls: "hide-sm" },
    { type: "range", label: "YTD", cmd: "set(1,'YTD')", cls: "hide-sm" },
    { type: "range", label: "1Y", cmd: "set(1,'year')" },
    { type: "range", label: "5Y", cmd: "set(5,'year',1,1,'week')", cls: "hide-sm" },
    { type: "range", label: "All", cmd: "set(1,'all')", cls: "hide-sm" },
]

Object properties

Default value

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

Note: The Begin Technical Analysis only/End Technical Analysis only comments delimit drawing tools that are included in the Technical Analysis / Advanced Charting package only. If you have the Core Charts package, your default configuration will not have these tools.

Default value

[
    "All",
    "Favorites",
    "Text",
    /* Begin Technical Analysis only */
    "Statistics",
    "Technicals",
    "Fibonacci",
    /* End Technical Analysis only */
    "Markings",
    "Lines"
]

Note: The Begin Technical Analysis only/End Technical Analysis only comments delimit drawing tool categories that are included in the Technical Analysis / Advanced Charting package only. If you have the Core Charts package, your default configuration will not have these categories.

Properties

Default value

{
    separator: () => `
        <cq-separator></cq-separator>`,
    item: ({ label, cmd }) => `
        <cq-item stxtap="${cmd}">${label}</cq-item>`,
    radio: ({ label, cmd, cls }) => `
        <cq-item
            ${cls ? `class="${cls}"` : ""}
            stxsetget="${cmd}">${label}<span class="ciq-radio"><span></span></span>
        </cq-item>`,
    checkbox: ({ label, cmd, cls }) => `
        <cq-item
            ${cls ? `class="${cls}"` : ""}
            stxsetget="${cmd}">${label}<span class="ciq-checkbox ciq-active"><span></span></span>
        </cq-item>`,
    radioOptions: ({ label, cmd, options, cls }) => `
        <cq-item ${cls ? `class="${cls}"` : ""}>
            <span class="ciq-edit" stxtap="${options}"></span>
            <div stxsetget="${cmd}">${label}<span class="ciq-radio"><span></span></span></div>
        </cq-item>`,
    range: ({ label, cmd, cls }) => `
        <div ${cls ? `class="${cls}"` : ""} stxtap="${cmd}">${label}</div>
    `,
    dt: ({ tool, group, label, shortcut }) => `
        <cq-item
            class="ciq-tool"
            cq-tool="${tool}"
            ${shortcut ? `cq-tool-shortcut="${shortcut}"` : ""}
            cq-tool-group="${group}"
            stxtap="tool('${tool}')"
        >
            <span class="icon ${tool}"></span>
            <label>${label}</label>
        </cq-item>
    `
}

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 = menu.sort(sort);
    return this[name].map((options) => this.menuRendering[options.type](options));
}

Note: The add-ons are configured here, but they are not included in your application unless they are enabled in the enabledAddOns property.

Properties

Default value

{
    tooltip: {
        ohl: true,
        volume: true,
        series: true,
        studies: true
    },

    inactivityTimer: { minutes: 30 },

    animation: { animationParameters: { tension: 0.3 } },

    rangeSlider: {},

    fullScreen: {},

    extendedHours: { filter: true },

    continuousZoom: {
        periodicities: [
            // Daily interval data
            {period: 1, interval: "month"},
            {period: 1, interval: "week"},
            {period: 1, interval: "day"},
            // 30 minute interval data
            {period: 8, interval: 30},
            {period: 1, interval: 30},
            // 1 minute interval data
            {period: 5, interval: 1},
            {period: 1, interval: 1},
            // One second interval data
            {period: 10, interval: 1, timeUnit:"second"},
            {period: 1, interval: 1, timeUnit:"second"},
        ],
        boundaries: {
            maxCandleWidth: 15,
            minCandleWidth: 3
        }
    },

    forecasting: {
        moduleName: "PlotComplementer",
        id: "forecast",
        // " Forecast" (below) is concatenated with the symbol to create the forecast plot name;
        // and so, the leading space is required.
        decorator: { symbol: "_fcst", display: " Forecast" },
        renderingParameters: { chartType: "channel", opacity: 0.5, pattern: "dotted" },
        quoteFeed: resources.forecastQuoteFeed,
        behavior: { refreshInterval: 60 }
    },

    outliers: {},

    tableView: {}, // v8.1.0

    shortcuts: {} // v8.2.0
}

Note: The application must import the plug-in source code files from the plugins folder.

Properties

• All plug‑in configuration objects can also include a moduleName property that identifies the class or contructor function used to instantiate the plug‑in. See the tfc configuration object in the default configuration below for an example. By default, the property name (with first letter capitalized) identifies the class or constructor function.
• All plug‑in configuration objects can include a postInstall property that defines a function that is called after the plug‑in has been instantiated. The function includes the following 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.
• The Technical Insights and Analyst Views plug‑ins are not configured in the config.plugins object. Technical Insights and Analyst Views are created and configured automatically by importing the plug‑in components.js file and including the web component (cq-technicalinsights or cq-analystviews respectively) in the chart context element.

Default value

{
    timeSpanEventPanel: {
        menuItemSelector: ".stx-markers cq-item.span-event",
        loadSample: true,
        showTooltip: true,
        infoPanel: {
            durationEvent: 'main',
            spanEvent: 'main',
            singleEvent: 'main'
        }
    },

    marketDepth: {
        volume: true,
        mountain: true,
        step: true,
        record: true,
        height: "50%",
        orderbook: true,
        allowUIZoom: true // v8.2.1
    },

    tfc: {
        moduleName: "TFC",
    },

    termStructure: {
        pointFreshnessTimeout: 1, // pointFreshnessTimeout 1 min for demo purposes
        postInstall({ uiContext, extension }) {
            new (CIQ.getFn("UI.CurveEdit"))(null, uiContext);
            const datepicker = uiContext.topNode.querySelector("cq-datepicker");
            if (datepicker) {
                datepicker.registerCallback(date => extension.setCurveDate(date));
            }
        }
    },

    visualEarnings: {
        container: ".ciq-dropdowns"
    },

    signalIQ: {
		panelHeight: 150,
		displayCondition: false,
		emojiPicker: resources.emojiPicker && {
			// create a picker instance and open it
			open({ stx, targetElement, handler }) {
				if (!this.pickers) this.pickers = new Map();
				if (!this.pickers.has(targetElement)) {
					const button = this.container = document.createElement("button");
					button.type = "button";
					button.classList.add("marker-emoji-picker");
					targetElement.parentElement.insertBefore(button, targetElement.nextSibling);
					const emojiList = [];
					this.emojis.forEach((label) => {
						emojiList.push({ value: stx.emojify(`:${label.replace(/\|/g, "::")}:`), label });
					});
					this.pickers.set(targetElement, new resources.emojiPicker({
						button,
						targetElement,
						container: this.container,
						emojiList,
						displacements: { x:0 }
					}));
				}
				const picker = this.pickers.get(targetElement);
				picker.onSelect(handler);
				picker.toggle(true);
			},
			// remove unused resources
			clean() {
				if (this.pickers) {
					this.pickers.forEach((picker) => picker.toggle(false));
					this.pickers = null;
				}
			},
			// Array of emojis.  Use a pipe to designate a skin tone; e.g. "point_up|skin-tone-4"
			emojis: [
				"smile", "partying_face", "sob", "money_mouth_face", "arrow_upper_right", "arrow_lower_right", "ox", "bear",
				"gem", "rocket", "heart", "poop", "fire", "bomb", "pray", "moneybag"
			]
		},
	}
}

Default value

{
    crosshair: "layout.crosshair",
    headsUp: "layout.headsUp",
    sidenav: "layout.sidenav",
    tableView: "channel.tableView", // v8.1.0
    drawing: "channel.drawing",
    drawingPalettes: "channel.drawingPalettes",
    breakpoint: "channel.breakpoint",
    containerSize: "channel.containerSize",
    sidenavSize: "channel.sidenavSize",
    sidepanelSize: "channel.sidepanelSize",
    pluginPanelHeight: "channel.pluginPanelHeight",
    tfc: "channel.tfc",
    tc: "channel.tc",
    analystviews: "channel.analystviews", // v8.1.0
    technicalinsights: "channel.technicalinsights", // v8.1.0 changed from recognia: "channel.recognia"
    dialog: "channel.dialog",
    keyboardNavigation: "channel.keyboardNavigation" // v8.2.0
}

Default value

{
    view: { tag: "cq-view-dialog" },
    aggregation: { tag: "cq-aggregation-dialog" },
    timezone: { tag: "cq-timezone-dialog" },
    language: { tag: "cq-language-dialog" },
    theme: { tag: "cq-theme-dialog" },
    study: {
        tag: "cq-study-dialog",
        attributes: {
            "cq-study-axis": true,
            "cq-study-panel": "alias"
        }
    },
    fibSettings: { tag: "cq-fib-settings-dialog" },
    share: { tag: "cq-share-dialog" }
}

Note: The class or constructor function can be assigned from the markerSample property of the resources parameter of the getConfig function. See the getConfig parameters section of the Implementation topic. Also see the default configuration below.

Default value

resources.markerSample

Note: The class or constructor function that implements the scroll bar styling can be assigned from the scrollStyle property of the resources parameter of the getConfig function. See the getConfig parameters section of the Implementation topic. Also see the default configuration below.

Default value

{
    refresh(component, options = { suppressScrollX: true }) {
        if (typeof resources.scrollStyle !== "function") return;
        if (!component.__ps) {
            component.__ps = new resources.scrollStyle(component, options);
        }
        component.__ps.update(component);
    }
}

• A value of true copies the active chart symbol.
• A value of false means use initialSymbol.
• A value of null leaves the chart without a symbol.

Default value

null

Default value

"Click to load a symbol"

• get(field, gcb)
• set(field, value, ucb)
• remove(field, ucb)

If the nameValueStore property is null or not defined, CIQ.NameValueStore is used by default.

See the themes property for information about how nameValueStore works with chart themes.

Note: The class or constructor function can be assigned from the nameValueStore property of the resources parameter of the getConfig function. See the getConfig parameters section of the Implementation topic. Also see the default configuration below.

Default value

resources.nameValueStore

Default value

() => {}

Default value

(stx) => {}

Default value

(stx) => {}

• Event type chartDestroy and chartReady have the CIQ.ChartEngine stx property in the details object.
• Event type contextSwitch has prev and context context objects in the details parameter.

Default value

(type, details) => {}

The createChart function has one optional parameter, container, which is the HTML element that contains the user interface elements of the chart. The container element is a cq-context element, or it contains a cq-context element or element with a cq-context attribute. The context element contains a chart container element; that is, an element with class chartContainer. If a container argument is not provided, createChart queries the DOM for the HTML element that contains the chart, ultimately using document.body if a container cannot be found. See the createChart section of the Implementation topic for more information.

The default configuration object is passed as a parameter to both CIQ.UI.Chart#createChartAndUI and CIQ.ChartEngine.create. See the default configuration below.

Default value

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

Default value

soloActive: {
	onDraw: {
		shouldSolo(stx) { // should chart solo when drawing is enabled for chart with stx parameter
		// Uncomment following if up to medium breakpoint in chart solo on drawing is not required
		// const { width, height } = stx.container.getBoundingClientRect();
		// return width < 584 || height < 350;
		return true;
		},
		// notification message
		notify: {
			message: "Click on the draw toggle again to close drawing tools and return to grid view",
		}
	},
	onTFC: {
		notify: {
			message: "Click on the TFC toggle again to close TFC plugin and return to grid view",
		}
	}
}

Example: sample-template-advanced.html?symbol=AAPL&name=Apple Inc&exchDisp=NASDAQ

The properties in the query string are the same as those for initialSymbol and have the same application.

Default value

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

• updates the initialSymbol property and
• updates the restore property to restore.symbol = false.

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 };
		}
	}
}