Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Trading
Time Span Events
Term structures
ScriptIQ
Troubleshooting
Glossary
Reference
JSFiddles

Chart Configuration

Charts can be simple graphs of static data or complex, real-time, information dashboards. See the helloworld.html templates in the library root folder and sample‑template‑active‑trader.html in the examples/templates folder for comparative examples.

A configuration object determines many of the features and capabilities of a chart, including add-ons, 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. Configuration elements added after 8.0 are marked with the number of the version in which the elements were added; for example, v8.1.0.

Topics

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:

Property Type Description
initialSymbol string | object The identifier of a financial instrument. Data for the instrument is plotted as the main series of the chart.

Object properties

Name Type Description
symbol string The identifier of a financial instrument.
name string The name of the company that provides the financial instrument; for example, the company that issues stock identified by symbol.
eschDisp string The name of the exchange on which the financial instrument is traded.

Default value

{
    symbol: "AAPL",
    name: "Apple Inc",
    exchDisp: "NASDAQ"
}
initialData array 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.

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

Default value

undefined
enabledAddOns object A list of the add-ons that are enabled and started when the chart loads. Typically, the list only includes add‑ons that are enabled, because add-ons not included in the list are implicitly disabled.

Note:

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

Properties

Name Type Description
The name of an add‑on. See addOns. boolean Enables or disables the add‑on. A value of true enables the add‑on; false disables it.

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
}
onNewSymbolLoad object Optionally contains two functions (either or both functions can be omitted):
  • 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) {
    }
}
restore boolean Indicates whether to save and restore the chart layout, preferences, and drawings.

Default value

true
lookupDriver function 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.

Default value

CIQ.ChartEngine.Driver.Lookup.ChartIQ
hotkeyConfig v8.1.0 object A list of keystroke shortcuts and the actions they perform.

Properties

Name Type Description
hotkeys object[] Specifies keyboard shortcuts and the actions performed by the shortcuts.

Object properties

Name Type Description
label v8.2.0 string The name of the shortcut as it appears in the keyboard shortcuts legend. See CIQ.Shortcuts#getShortcutContent.
action string | function The action performed by the keyboard shortcut. If the action is specified by a string, it must be one of "up", "down", "right", "left", "pageRight", "pageLeft", "zoomInXAxis", "zoomOutXAxis", "zoomInYAxis", "zoomOutYAxis", "toggleCrosshairs", "toggleContinuousZoom", "home", "end", "delete", "escape", "keyboardNavigateNext", "keyboardNavigatePrevious", "keyboardNavigateClick", or "tableView" (see CIQ.UI.KeystrokeHub.executeHotkeyCommand). A custom action can be defined by a function. The function is called with an object argument that contains references to the chart engine, stx, and the options object of this hotkey declaration.
options object Quantifiers of the action. Vertical movement actions, such as "up" and "down", are quantified in percentages of the chart height. For example, the option { percent: 0.02 } scrolls the chart up 2% of its height. Horizontal movement actions, such as "left" and "right", are quantified by the number of chart bars (or ticks). For example, { bars: 1 } scrolls the chart left or right by one bar.

The object includes a property that specifies the quantifier: either "percent" or "bar". The type of the property is number. The value for "percent" must be a real number; for "bar", an integer.

Examples:

{ percent: 0.1 }
{ bars: 10 }.

commands string[] The keys or key combinations that invoke the action. Key combinations are separated by a plus sign (+). All keys in a key combination other than the last key are modifier keys, such as Shift, Alt, or Ctrl. The keyboard shortcut (hotkey) handler checks both KeyboardEvent.key and KeyboardEvent.code. If the keystroke originated on the numeric keypad, only KeyboardEvent.code is checked, allowing different shortcuts to be assigned to the numeric keypad.
extension v8.2.0 string Identifies the add-on or plug-in to which the keyboard shortcut applies.

Note: If the add-on or plug-in is not enabled (see enabledAddOns and plug-ins, respectively), the keyboard shortcut does not appear in the keyboard shortcuts legend.

keysToRepeat string[] A list of keyboard shortcuts that continually generate the shortcut action as long as the shortcut is held in the keydown state.

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", "-", "_", "=", "+"
    ]
}
systemMessages v8.2.0 object Contains event objects 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.

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"
    }
}
marketFactory function Provides a market factory for the chart. A market factory returns the market definition for a symbol object. The market definition makes the chart aware of the hours of operation of the market on which the symbol is traded; otherwise, the chart operates in 24x7 mode. The ChartIQ quote simulator and the extended hours add-on require a market factory. See CIQ.Market.Symbology.factory for a detailed explanation of market factories.

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
chartEngineParams object Configuration parameters for the chart engine. See CIQ.ChartEngine for the full list of available chart engine configuration parameters.

Default value

{
    preferences: {
        labels: false,
        currentPriceLine: true,
        whitespace: 0
    }
}
quoteFeeds object[] A list of the quote feeds to attach to the chart engine along with initialization parameters and filtering criteria. See CIQ.ChartEngine#attachQuoteFeed for more information on quote feeds.

Object properties

Name Type Description
quoteFeed object A quote feed object. See the quoteFeedSimulator.js file in the examples folder for an example.

Note: A quote feed can be assigned from the quoteFeed property of the resources parameter of the getConfig function. See the getConfig parameters section of the Implementation topic. Also see the default configuration below.

behavior object Initialization parameters for the quote feed. See the behavior parameter of CIQ.ChartEngine#attachQuoteFeed for a list of available properties.
filter function A function that determines whether the quote feed is used with the current chart instrument. See the filter parameter of CIQ.ChartEngine#attachQuoteFeed for more information.

Default value

[
    {
	    quoteFeed: resources.quoteFeed,
		behavior: { refreshInterval: 1, bufferSize: 200 },
	}
]
selector object An assortment of CSS selectors used to obtain references to the DOM nodes that represent the chart elements named by the object properties.

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",
}
themes object Provides the theme parameters for the chart.

Properties

Name Type Description
builtInThemes object The list of available chart themes.

Properties

Name Type Description
A CSS selector that identifies a chart theme. string The name that appears in the THEMES section of the chart preferences menu.
defaultTheme string The CSS selector of the theme that is used when the chart initially loads.

Note: This setting is overridden by locally stored preferences; that is, any built-in theme the user has previously selected from the Preferences menu.

nameValueStore class | constructor function Interacts with a name/value store to save and retrieve the chart theme and any custom-defined themes. If the nameValueStore property is null or not defined, the general-purpose nameValueStore is used. If the general-purpose nameValueStore is null or undefined, CIQ.NameValueStore is used.

See nameValueStore for information on creating a name/value store class or constructor function.

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

{
    builtInThemes: { "ciq-day": "Day", "ciq-night": "Night" },
    defaultTheme: "ciq-night",
    nameValueStore: resources.nameValueStore // v8.2.0
}
menuPeriodicity object[] Specifies the elements of the chart periodicity menu.

Object properties

Name Type Description
type string The type of user interface element that the menu item represents. See menuRendering.
label string The text that appears on the menu.
cmd function The helper function called when the menu item is selected. The helper is accessed from the UI context. See CIQ.UI.Layout#setPeriodicity.

Default value

[
    { type: "item", label: "1 D", cmd: "Layout.setPeriodicity(1,1,'day')" },
    { type: "item", label: "1 W", cmd: "Layout.setPeriodicity(1,1,'week')" },
    { type: "item", label: "1 Mo", cmd: "Layout.setPeriodicity(1,1,'month')" },
    { type: "separator", },
    { type: "item", label: "1 Min", cmd: "Layout.setPeriodicity(1,1,'minute')" },
    { type: "item", label: "5 Min", cmd: "Layout.setPeriodicity(1,5,'minute')" },
    { type: "item", label: "10 Min", cmd: "Layout.setPeriodicity(1,10,'minute')" },
    { type: "item", label: "15 Min", cmd: "Layout.setPeriodicity(3,5,'minute')" },
    { type: "item", label: "30 Min", cmd: "Layout.setPeriodicity(1,30,'minute')" },
    { type: "item", label: "1 Hour", cmd: "Layout.setPeriodicity(2,30,'minute')" },
    { type: "item", label: "4 Hour", cmd: "Layout.setPeriodicity(8,30,'minute')" },
    { type: "separator", },
    { type: "item", label: "1 Sec", cmd: "Layout.setPeriodicity(1,1,'second')" },
    { type: "item", label: "10 Sec", cmd: "Layout.setPeriodicity(1,10,'second')" },
    { type: "item", label: "30 Sec", cmd: "Layout.setPeriodicity(1,30,'second')" },
    { type: "separator", },
    { type: "item", label: "250 MSec", cmd: "Layout.setPeriodicity(1,250,'millisecond')" }
]
menuChartStyle object[] Specifies the elements of the chart styles menu.

Object properties

Name Type Description
type string The type of user interface element that the menu item represents. See menuRendering.
label string The text that appears on the menu.
cmd function The helper function called when the menu item is selected. The helper is accessed from the UI context. See CIQ.UI.Layout#setChartType.

Default value

[
    { type: "radio", label: "Candle", cmd: "Layout.ChartType('candle')" },
    /* Begin Technical Analysis only */
    { type: "radio", label: "Bar", cmd: "Layout.ChartType('bar')" },
    { type: "radio", label: "Colored Bar", cmd: "Layout.ChartType('colored_bar')" },
    /* End Technical Analysis only */
    { type: "radio", label: "Line", cmd: "Layout.ChartType('line')" },
    { type: "radio", label: "Vertex Line", cmd: "Layout.ChartType('vertex_line')" },
    { type: "radio", label: "Step", cmd: "Layout.ChartType('step')" },
    { type: "radio", label: "Mountain", cmd: "Layout.ChartType('mountain')" },
    /* Begin Technical Analysis only */
    { type: "radio", label: "Baseline", cmd: "Layout.ChartType('baseline_delta')" },
    { type: "radio", label: "Hollow Candle", cmd: "Layout.ChartType('hollow_candle')" },
    { type: "radio", label: "Volume Candle", cmd: "Layout.ChartType('volume_candle')" },
    { type: "radio", label: "Colored HLC Bar", cmd: "Layout.ChartType('colored_hlc')" },
    { type: "radio", label: "Scatterplot", cmd: "Layout.ChartType('scatterplot')" },
    /* End Technical Analysis only */
    { type: "radio", label: "Histogram", cmd: "Layout.ChartType('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.

menuChartAggregates object[] Specifies the elements of the chart aggregates menu.

Object properties

Name Type Description
type string The type of user interface element that the menu item represents. See menuRendering.
label string The text that appears on the menu.
cmd function The helper function called when the menu item is selected. The helper is accessed from the UI context. See CIQ.UI.Layout#setChartType.
options function The function called when the preferences (cog wheel) control associated with the menu item is selected. The showAggregationEdit function opens a preferences dialog box.

Default value

[
    { type: "separator" },
    { type: "radio", label: "Heikin Ashi", cmd: "Layout.ChartType('heikinashi')" },
    { type: "radioOptions", label: "Kagi", cmd: "Layout.ChartType('kagi')", options: "Layout.showAggregationEdit('kagi')" },
    { type: "radioOptions", label: "Line Break", cmd: "Layout.ChartType('linebreak')", options: "Layout.showAggregationEdit('linebreak')" },
    { type: "radioOptions", label: "Renko", cmd: "Layout.ChartType('renko')", options: "Layout.showAggregationEdit('renko')" },
    { type: "radioOptions", label: "Range Bars", cmd: "Layout.ChartType('rangebars')", options: "Layout.showAggregationEdit('rangebars')" },
    { type: "radioOptions", label: "Point & Figure", cmd: "Layout.ChartType('pandf')", options: "Layout.showAggregationEdit('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.

menuChartPreferences object[] Specifies the elements of the CHART PREFERENCES section of the preferences menu.

Object properties

Name Type Description
type string The type of user interface element that the menu item represents. See menuRendering.
label string The text that appears on the menu.
cmd function The helper function called when the menu item is selected. The helper is accessed from the UI context. See CIQ.UI.Layout#setRangeSlider, CIQ.UI.Layout#setExtendedHours, CIQ.UI.Layout#setOutliers, CIQ.UI.Layout#setMarketDepth, and CIQ.UI.Layout#setL2Heatmap.
cls string A class attribute applied to the DOM node that represents the menu item. CSS class selectors reference the attribute.

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.

menuYAxisPreferences object[] Specifies the elements of the y-axis preferences menu.

Object properties

Name Type Description
type string The type of user interface element that the menu item represents. See menuRendering.
label string The text that appears on the menu.
cmd function The helper function called when the menu item is selected. The helper is accessed from the UI context. See CIQ.UI.Layout#setChartScale and CIQ.UI.Layout#setFlippedChart.

Default value

[
    { type: "checkbox", label: "Log Scale", cmd: "Layout.ChartScale('log')" },
    { type: "checkbox", label: "Invert", cmd: "Layout.FlippedChart()" },
]
menuViewConfig object Specifies the parameters used in WebComponents.cq-views#initialize, such as the name/value store used to save and retrieve the chart views.

Default value

{}
object Configuration settings for the studies menu. See WebComponents.cq-studies.html#initialize.

Properties

Name Type Description
excludedStudies object Specifies studies that are excluded from the studies menu.

Properties

Name Type Description
The name of a study as defined in the study library. boolean Indicates whether or not to exclude the study from the menu. Typically, includes only those studies that are excluded from the menu because studies are included in the menu by default.
alwaysDisplayDialog boolean | object Specifies whether studies automatically display the study edit dialog box after the study has been added to the chart. A boolean value configures all studies. An object provides a map of study names and boolean values that configure the studies individually.

Object properties

Name Type Description
The name of a study as defined in the study library. boolean Indicates whether or not to display the edit dialog box after the study has been added to the chart.
dialogBeforeAddingStudy boolean | object Specifies whether studies automatically display the study edit dialog box before the study is added to the chart. A boolean value configures all studies. An object provides a map of study names and boolean values that configure the studies individually.

Object properties

Name Type Description
The name of a study as defined in the study library. boolean Indicates whether or not to display the edit dialog box before the study is added to the chart.

Default value

{
    excludedStudies: { // v8.2.0
        "stochastics": true, // Remove the simple stochastics study, which is replaced by Stochastics
    },
    alwaysDisplayDialog: { ma: true, AVWAP: true }
}
rangeMenu object[] Specifies the elements of the range menu, which is used to select time periods for the chart.

Object properties

Name Type Description
type string The type of user interface element that the menu item represents. See menuRendering.
label string The text that appears on the menu.
cmd function The event handler called when the menu item is selected. The handler is called on the nearest parent element that is able to respond to the event.
cls string A class attribute applied to the DOM node that represents the menu item. CSS class selectors reference the attribute.

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" },
]
drawingTools object[] Specifies the tools that appear on the drawing tool palette.

Object properties

Name Type Description
type string The type of user interface element that the menu represents. See menuRendering.
tool string Identifies the tool.
group string Categorizes the tool based on the tool's function. Must be on of the elements of drawingToolGrouping (see below).
label string The text that identifies the tool on the drawing palette and in the tool's tooltip.
shortcut function The keyboard shortcut that activates the tool. The shortcut is modified by the Alt key; for example, Alt+t activates the Annotation tool.

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.

drawingToolGrouping string[] 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.

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.

object Specifies the functions that process the chart menu item types.

Properties

Name Type Description
separator function Returns a DOM element that serves as a horizontal rule or other separator of menu items.
item function Returns a DOM element that creates an interactive menu label.
radio function Returns a DOM element that creates an interactive menu label and radio button.
checkbox function Returns a DOM element that creates an interactive menu label and check box.
radioOptions function Returns a DOM element that creates an interactive menu label, radio button, and preferences (cog wheel) control.
range function Returns a DOM element that creates an interactive label for the range menu.
dt function Returns a DOM element that creates an interactive element that represents a drawing tool on the drawing tool palette.

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>
    `
}
getMenu function A function that returns the items of a chart menu configuration (such as menuPeriodicity et al. above) as an array of DOM nodes.

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));
}
addOns object The available chart add-ons and their initial configuration.

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

Properties

Name Type Description
tooltip object Specifies the ohl, volume, series, studies, showOverBarOnly, change, interpolation, and useDataZone parameters of CIQ.Tooltip.
inactivityTimer object Specifies the minutes, interval, wakeCB, and sleepCB parameters of CIQ.InactivityTimer.
animation object Specifies the animationParameters and easeMachine parameters of CIQ.Animation.
rangeSlider object Specifies the height, yAxis, chartContainer, and menuContextClass parameters of CIQ.RangeSlider.
fullScreen object Specifies custom parameters for CIQ.FullScreen.
extendedHours object Specifies the filter and menuContextClass parameters of CIQ.ExtendedHours.
continuousZoom object Specifies the periodicities and boundaries parameters of CIQ.ContinuousZoom.
forecasting object Specifies the id, quoteFeed, behavior, filter, decorator, and renderingParameters parameters of CIQ.PlotComplementer.

Note: The quoteFeed object can be assigned from the forecastQuoteFeed property of the resources parameter of the getConfig function. See the getConfig parameters section of the Implementation topic. Also see the default configuration below.

outliers object Specifies the multiplier, altColors, and menuContextClass parameters of CIQ.Outliers.
tableView v8.1.0 object Specifies the minColumnWidth, coverUIMaxWidth, and coverContainer parameters of CIQ.TableView.
shortcuts v8.2.0 object Placeholder property for future specification related to CIQ.Shortcuts.
Note: All add‑on configuration objects can also include a moduleName property that identifies the class or constructor function used to instantiate the add‑on. See the forecasting configuration object in the default configuration below for an example. By default, the property name (with first letter capitalized, for example, Tooltip or InactivityTimer) identifies the class or constructor function.

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
}
plugins object The initial configuration of the chart plug-ins.

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

Properties

Name Type Description
timeSpanEventPanel object Specifies the height, context, menuItemSelector, loadSample, infoPanel, showTooltip, customConstants, cb, and alwaysZoom parameters of CIQ.TimeSpanEventPanel.
marketDepth object Specifies the volume, mountain, tension, height, yAxis, precedingContainer, orderbook, record, heatmapSize, heatmapBlockHeight, headsUp, and allowUIZoom parameters of CIQ.MarketDepth, which creates the market depth panel of the Active Trader plug-in.

Also specifies the panel, step, bidPeakColor, askPeakColor, bidBaseColor, askBaseColor, bidColor, askColor, bidVolumeColor, askVolumeColor, shadeOpacity, width, pattern, and heightFactor parameters of CIQ.ChartEngine#drawMarketDepth.

Note: The widthFactor, fontFamily, and fontSize parameters of CIQ.ChartEngine#drawMarketDepth are not implemented, and the mountain, volume, and tension parameters are duplicated in CIQ.MarketDepth.

tfc object Specifies the account, chart, and context parameters of CIQ.TFC. Also specifies the following properties utilized by the plugins/tfc/tfc-loader.js file:
  • allowUniqueAccountConstruction — A boolean value that indicates whether unique instances of CIQ.Account should be created for each CIQ.TFC instance. If true, unique instances are created; if false, a single CIQ.Account object (which may be specified by the account property) is shared among all TFC instances.
  • loadTemplate — A boolean value that indicates whether to load an HTML template used to create the Trade from Chart display. By default the template markup in plugins/tfc/tfcHtml.js is loaded. Set this property to false if the Trade from Chart markup is already present in the document.
  • htmlTemplate — A markup string to use instead of the default HTML contained in plugins/tfc/tfcHtml.js.
termStructure object Specifies the spacingType*, dataField*, fieldsToFormatAsPercent, drawShading*, useQuotefeed, showcaseFreshPoints*, pointFreshnessTimeout*, showUpdateAnimations*, showUpdateStamp*, showUpdateStampSeconds, and maxZoom parameters of CIQ.CrossSection.

*Saved in local storage as part of the chart layout. If configuration changes are made after the chart has initially loaded, the browser cache must be cleared for the changes to take effect.

visualEarnings object Specifies the context, menuContainer, markup, and menu parameters of CIQ.VisualEarnings.
Note:
  • 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: {
        menuContainer: ".ciq-dropdowns"
    }
}
channels object Specifies component communication channels. Layout properties (crosshair, headsUp, and sidenav in the default configuration below) are persisted between reloads.

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
}
dialogs object Specifies the tags that contain the web component markup for the chart dialog boxes. Also specifies attributes of the dialog tags.

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" }
}
eventMarkersImplementation class | function 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.

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
scrollbarStyling object 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.

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);
    }
}
nameValueStore v8.2.0 class | constructor function Interacts with a name/value store to save and retrieve data about the chart, such as preferences, layout settings, drawings, and themes. The class or constructor function must have the following methods:
  • get(field, gcb)
  • set(field, value, ucb)
  • remove(field, ucb)
where field is the name of the storage field, value is the value to set for the field, gcb is a callback function of type CIQ.NameValueStore~getCallback, and ucb is a callback function of type CIQ.NameValueStore~updateCallback.

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
onWebComponentsReady v8.1.0 function A function that is called when the web component DOM elements have been bound to their respective classes.

Default value

() => {}
onChartReady v8.2.0 function A function that is called when the chart has been loaded.

Default value

(stx) => {}
createChart function Specifies a function that creates and returns a new chart; that is, a CIQ.ChartEngine instance. The function calls CIQ.UI.Chart#createChartAndUI or alternatively CIQ.ChartEngine.create and provides all necessary arguments. CIQ.ChartEngine.create is called when the CIQ.UI namespace is not available. CIQ.UI is created when componentUI.js or component.js is imported into your application.

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

Implementation

A configuration object is an essential part of your charting application. However, implementing a configuration object is easy. First you create the object with a simple function call, then you use the object's createChart property to create a chart with all the configuration settings.

getConfig

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

The defaultConfiguration.js file is an ES6 module that exports the getConfig function as the module's default export.

You can 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.
  • markerSample — 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.

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

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

// Get a configuration object.
const config = getDefaultConfig({
	quoteFeed: quotefeed,
	forecastQuoteFeed: forecastfeed,
	markerSample: marker.MarkersSample,
	scrollStyle: PerfectScrollbar,
	nameValueStore: remoteStore
});

The properties of the resources object are assigned to the following properties of the default configuration object:

Resource Configuration property
quoteFeed quoteFeeds[0].quoteFeed
forecastQuoteFeed addOns.forecasting.quoteFeed
markerSample eventMarkersImplementation
scrollStyle scrollbarStyling
nameValueStore nameValueStore and themes.nameValueStore

createChart

The createChart property of the default configuration object is a convenience function that creates a chart configured with the configuration object created by the getConfig function.

Call createChart after you have created a configuration object, for example:

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

let stxx = config.createChart();

Here's the default configuration of createChart:

createChart: function(container) {
    let config = this;
    if (CIQ.UI) return (new CIQ.UI.Chart()).createChartAndUI({ container, config }).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:

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 add-ons and plug-ins — can be customized without editing the contents of defaultConfiguration.js. Resources can be passed to the getConfig function exported from defaultConfiguration.js to set configuration values, and the properties of the object returned by getConfig can be modified to further alter the configuration.

See the Default configuration topic for a list of the properties of the default configuration object and their default values.

Custom getConfig parameters

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

See getConfig parameters.

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 initialData parameter.

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

  • quoteFeedexamples/feeds/quoteFeedSimulator.js and the Data Integration: Quote Feeds tutorial
  • forecastQuoteFeedexamples/feeds/quoteFeedForecastSimulator.js
  • markerSampleexamples/markers/markersSample.js and the Markers tutorial
  • scrollStylejs/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 add-ons.
config.enabledAddons = {
    rangeSlider: true,
    tableView: true
}

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

Note:

  • You must make your customizations before calling createChart (or CIQ.UI.Chart#createChartAndUI or CIQ.ChartEngine.create). The configuration object returned by the getConfig function is the same object passed to CIQ.UI.Chart#createChartAndUI or CIQ.ChartEngine.create by the configuration object's createChart function (see the createChart default configuration); and so, any configuration customizations are reflected in both references.

  • 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();

Examples:

Initial symbol

See initialSymbol

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

Add-ons

See enabledAddOns.

Recreate the list of enabled add-ons:

config.enabledAddOns = {
	extendedHours: true,
	fullScreen: true,
	rangeSlider: true,
	tableView: true,
    tooltip: true
}

Add an add-on to the default list:

config.enabledAddOns.tooltip = true;

Disable a default add-on:

config.enabledAddOns.rangeSlider = false;

Add-on properties

See addOns.

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 = {
    menuContainer: ".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 of onNewSymbolLoad:

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:

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 createChart section of the Implementation topic for more information.

Container ID

The CIQ.UI.Chart#createChartAndUI method called by config.createChart (see the createChart section of the Implementation topic) offers an alternative means of assigning a chart ID.

The method's container parameter references the HTML element that contains the chart. If an argument is not provided for the container parameter, the top-most parent element of the element that contains the chart is referenced. In either case, if the chart configuration object does not include a chartId property, createChartAndUI assigns the ID of the container element (if an ID exists) to the chartId property.

For example, the sample-template-multi-charts.html template creates two charts. The charts are contained in cq-instant-chart custom HTML elements — notice the id attributes:

<div class="column left">
    <cq-instant-chart
        tmpl-src="examples/templates/partials/sample-template-advanced-context.html" id="chart0" symbol="AAPL">
    </cq-instant-chart>
</div>
<div class="column right">
    <cq-instant-chart
        tmpl-src="examples/templates/partials/sample-template-advanced-context.html" id="chart1" symbol="MSFT">
    </cq-instant-chart>
</div>

Each chart is created by a call to config.creatChart(node), where node is the cq-instant-chart element that contains the chart.

Because the configuration object for each chart in sample-template-multi-charts.html does not contain a chartId property, "chart0" is assigned to config.chartId for the first chart, "chart1" for the second.

Any HTML container element — not just cq-instant-chart — can contain a chart and set an id attribute.

Note: The CIQ.ChartEngine.create function does not assign the chart container ID to the chartId configuration property.

Next steps

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