Version 8.1.0

Release date: 10/15/20

See the 8.0.0 to 8.1.0 upgrade notes for information about upgrading to this version.

Deprecated functions

Note: All deprecated functions are maintained in the library for backward compatibility. To use deprecated functions in your applications, import js/deprecated.js.

New features

  • jQuerydependency removed — jQuery has been removed as a library dependency. See the "Deprecated functions" section above for a list of jQuery‑related functions that are no longer recommended. The following new ChartIQ functions replace functionality formerly provided by jQuery.

    • New CIQ.UI.trulyVisible function determines the visibility of a DOM element based on the following CSS properties: opacity, display, visibility, width, and height. Replaces the :trulyVisible selector.
    • New CIQ.UI.stxtap function attaches an event listener to an element. Replaces $.fn.stxtap.
    • New CIQ.UI.UIManager#findLifts function finds all cq-lift elements for the specified menu, but not lifts that are within nested menus.
    • New Faquery class approximates a subset of jQuery functionality.
    • New CIQ.UI.$ function wraps a node or node list in a jQuery object or Faquery object.
    • New CIQ.climbUpDomTree function gets all parent elements, including the starting element itself. Replaces $.fn.parentsAndMe.
    • New CIQ.cqvirtual function creates a virtual DOM for an element. Replaces $.fn.cqvirtual.
    • New CIQ.cqrender function copies the virtual DOM of an element to the actual DOM. Replaces $.fn.cqrender.
    • New CIQ.guaranteedSize function returns a guaranteed width and height for a DOM element. Replaces $.fn.guaranteedWidth and $.fn.guaranteedHeight.
    • New CIQ.removeChildIfNot function removes from a node all children that do not match a specified selector. Replaces $.fn.emptyExceptTemplate.
    • New CIQ.elementDimensions function measures an element's styled width and height.
    • CIQ.efficientDOMUpdate function adds a return value.
    • CIQ.UI.makeFromTemplate convenience function input parameters continue to support jQuery elements.
  • Table View — The new Table View add-on creates an on-screen table that contains the same information as the graphical chart display, including study and comparison data. The table is readable by screen readers. The data in the table can be copied to the clipboard or exported to a character-separated values file. Data for Volume, % Change, and % Change vs Average can be hidden and displayed using the Additional columns button.

    Table view of chart data with comparison (MSFT) and study data (ATR Bands) Figure. Table view of chart data with comparison (MSFT) and study (ATR Bands) data.

  • Anchor selector — Users can now set the anchor time for the Anchored Volume Weighted Average Price (AVWAP), Projected Volume at Time (PVAT), and Projected Aggregate Volume (PAV) studies using an interactive control, an anchor handle or selector. The control is a vertical line on the study that users select and drag left and right to set the anchor time. The anchor handle is draggable only within a one-day time frame because the studies apply only to intraday data. A checkbox in the study settings panel turns the anchor handle on or off.

    AVWAP, PVAT, and PAV with anchor selectors Figure. AVWAP, PVAT, and PAV with anchor selectors (blue vertical lines).

  • Option Sentiment by Strike — The Option Sentiment by Strike study enables traders to quickly interpret options activity for a security. The study shows a profile of the volume or open interest of option contracts at each strike price for a security's most current data point. Calls and puts are graphed as separate, adjacent bars, allowing the user to understand any bias within the two option types.

    Option Sentiment by Strike study showing volume of calls and puts at various strike prices Figure. Option Sentiment by Strike study showing volume of calls (tan bar) and puts (purple bar) at various strike prices.


    • The Option Sentiment by Strike study is an optional extra that is included in the Technical Analysis and Active Trader packages.
    • The study requires a special quote feed that includes option data. See examples/feeds/optionChainSimulator.js for an example of a simulated option quote feed.
  • React — An updated React component toolkit provides developers with a variety of complete charting solutions that can be easily incorporated into React applications. The charting application components are comparable to ChartIQ's most popular sample templates. New components include:

    • HelloWorld — Creates a basic chart with no user interface as a starting point for using the ChartIQ API in React.
    • AdvancedChart — Includes all the advanced functionality of the technical-analysis-chart.html template.
    • MultiChart — Displays two advanced charts on screen simultaneously; like sample-template-multi-charts.html.
    • ActiveTraderWorkstation — Creates an information-rich desktop for cryptocurrency traders and other active traders; equivalent to sample-template-active-trader.html.
    • CustomChart — Integrates native React components with ChartIQ W3C-standard web components; technical-analysis-chart.html plus React. Incorporates new user interface widgets:
      • RecentSymbols — Adds a RECENT tab to the lookup controls created by ChartIQ's cq-lookup web component. The RECENT tab displays a list of recently used financial instrument symbols maintained by the RecentSymbols component.
      • ShortcutDialog — Creates a dialog box that enables users to set shortcut keys on the chart's drawing tools. The component is accessed from a drop-down menu created by a ChartIQ cq-menu web component.

    See the chartiq-react-app project on GitHub for more information. See the 8.0.0 to 8.1.0 upgrade notes for information about upgrading your React apps.

  • TypeScript — TypeScript definition files are now available as part of the ChartIQ library (contact your account manager or to have the definition files added to your library package). TypeScript definitions are generated for all source code elements, including namespaces, classes, functions, properties, and parameters. The definition files contain type information derived from ChartIQ's API documentation, which is created using JSDoc. The definition files enable code editors to display relevant, helpful information — such as parameter lists, default values, and return types — as you work with library source code.

    TypeScript code assist Figure. TypeScript code assist.

Chart enhancements

  • Baseline charts — The baseline of Baseline charts can now be set programmatically, enabling you to specify the baseline for any line series whether it's rendered in a panel or on the main chart.

    Chart with comparison baseline series Figure. Chart with comparison baseline series.

  • Keyboard navigation of charts — A variety of new keystroke combinations enable users to navigate charts using just the keyboard. For example:

    Keystroke Functionality
    Right arrow Scroll chart right one bar or, if crosshairs enabled, move crosshairs one bar right
    Left arrow Scroll chart left one bar or, if crosshairs enabled, move crosshairs one bar left
    Alt + Right Arrow Scroll chart right by the maximum number of bars on screen
    Alt + Left Arrow Scroll chart left by the maximum number of bars on screen

    See the Accessibility section of the Navigating the Chart Interface tutorial for the complete list of keystroke combinations.

    See hotkeyConfig.hotkeys in /js/defaultConfiguration.js for customization options.

  • Views menu — The icon for the Views menu has been changed on small displays (mobile and web responsive) to better indicate the icon’s purpose. The icon is now an eye; previously it was a mountain.

    Menu toolbar for small displays, including Eye icon for Views menu

Plug-in enhancements

  • Trade from Chart — The Trade from Chart plug-in is now supported on multiple charts on the same web page. The plug-in has been added to the Multi-Charts template to create a ready-made, multiple-chart trading application.

Note: The plug-in must be uncommented in sample-templates-multi-charts.html.

Trade from Chart plug-in on two charts Figure. Trade from Chart and Multi-Charts template.

  • New CIQ.Account#getPoller function returns a poller that synchronizes multiple instances of the Trade from Chart plug-in on multiple charts. The new function replaces the CIQ.Account.prototype.Poller property definition formerly in plugins/tfc/tfc.js.

    See the 8.0.0 to 8.1.0 upgrade notes for more information.

  • Visual Earnings — The CIQ.VisualEarnings constructor function has added the params.markup and parameters.

Date/Time enhancements

  • New CIQ.dateToStr function formats a date according to an input string, for example: "YYYY:MM:dd hh:mm".

  • New CIQ.Market#getNormalOpen function gets the normal open time for the current market. In cases where there are two trading sessions, the first is used.

  • New CIQ.Market#getNormalClose function gets the normal close time for the current market. In cases where there are two trading sessions, the second is used.

  • CIQ.Studies.getMarketOffset function now includes a params object instead of a list of individual parameters. Removed the isForex parameter. Added the shiftToDateBoundary parameter.

X-Axis enhancements

  • CIQ.ChartEngine#createXAxisLabel function signature now includes a params object instead of a list of individual parameters. Added the padding parameter for easy customization.

Other enhancements


The webpack files have been moved to a new webpack-example folder located in the root folder of the library.

The webpack-example folder contains the following webpack-related files and sub-folders:

  • src (folder)
    • sample-template-webpack.js — Creates a bundle equivalent to technical-analysis-chart.html
    • sample-template-webpack-minimal.js — Creates a basic bundle equivalent to helloworld.html
    • sample-template-native-sdk-webpack.js — Creates a bundle equivalent to technical-analysis-chart.html for mobile devices
  • index.html — An example file that loads the sample-template-webpack.js webpack bundle
  • package.json — Contains the build scripts and dependencies for the webpack examples
  • package-lock.json — Provides a static representation of the dependency tree
  • webpack-config.js — An example of how to load the technical-analysis-chart.html template in webpack
  • webpack-config-minimal.js — An example of how to load the helloworld.html template in webpack
  • webpack-config-mobile.js — An example of how to load the sample-template-native-sdk.html template in webpack