Getting started
Chart interface
Web components
Chart internals
Data integration
Frameworks and bundlers
Mobile development
Time Span Events
Term structures

Navigating the Chart Interface

The ChartIQ chart user interface has been carefully designed by our user experience (UX) team to be intuitive and versatile. Performance, accuracy, and responsiveness combine to make using our charts almost a tactile experience.

This tutorial takes you on a tour of the chart UI and reveals some of the nuances and considerations that went into the interface design.

Symbol input

The syntax for instrument symbols depends on your data feed. The chart allows both a single symbol or an equation composed of multiple symbols. Symbology rules for determining the type of symbol (stocks, forex, indices, funds, futures, etc.) must be set to enable proper functionality. To enable equations to be used on a chart, the CIQ.ChartEngine#allowEquations parameter must be set to true, and the equation needs to be preceded by an equals sign (=) for it to be parsed as an equation, for example:


See the equations tutorial for more details on API calls supporting equations.


In general, navigation of the chart is similar to using standard online map apps. A chart is panned (scrolled) by dragging the chart. On desktop devices, a user grabs the chart with the mouse and can drag it left, right, up, or down. On touch devices, a single finger touch moves the chart from side to side or up and down.

On laptop touchpads, a two-finger horizontal stroke pans the chart left or right. On all devices, a swipe action rapidly scrolls the chart in the swipe direction, slowing with an easing animation.

The right and left arrow keys and Home and End keys also pan the chart. See the Accessibility section.

When a chart is panned so that the most recent bar is hidden, a "home" icon appears on the screen. Pressing this icon animates the chart back to the home position. This can also be accomplished programmatically by calling stxx.home().

It is possible to programmatically move the chart left or right and to animate to specific locations with the CIQ.ChartEngine#scrollTo method. Using this technique, it is relatively easy to set up keyboard shortcuts for panning. The provided sample templates include support for panning left and right using the arrow keys.

Note: On touch devices, when the crosshairs are enabled, two fingers can be used to pan the chart.

Panning defaults

See CIQ.ChartEngine.Chart#allowScrollPast and CIQ.ChartEngine.Chart#allowScrollFuture to override the horizontal panning defaults.

The Default vertical behavior is to stop panning once only 1/5 of the chart remains on screen, so the primary chart never completely scrolls off the screen; unless you start zooming the y axis by grabbing it and pulling it down. Once the zoom level goes into the negative range (meaning that you are shrinking the chart vertically) the vertical panning limitation goes away. And you can force this by explicitly setting the Y axis zoom level to a very small negative number on your loadChart callback. Example:

		masterData: sample5min,
		periodicity: {
			period: 1,
			interval: 5,
			timeUnit: "minute"
	function() {
		stxx.chart.yAxis.zoom = -0.0000001;


The mouse wheel or touchpad is the primary interface for zooming a chart. A two-finger up/down stroke on a laptop touchpad zooms the chart. Likewise, mouse wheel movement allows rapid zooming. On touch devices, zooming is done by pinching the screen.

The up and down arrow keys also zoom the chart. See the Accessibility section.

You can explicitly zoom either the x- or y-axis by grabbing either axis with the mouse and moving to the desired zoom level.

(+) and (-) zoom buttons are placed on the screen as a convenience for users as well.


The methods CIQ.ChartEngine#zoomIn and CIQ.ChartEngine#zoomOut enable developers to programmatically zoom the chart in or out. Each call zooms the chart by approximately 10% (the same as clicking on the +/- buttons). Precise zooming can be accomplished programmatically through manipulation of candle width by calling CIQ.ChartEngine#zoomSet.

Note: The world is divided on whether mouse wheel/trackpad upward strokes should zoom in or zoom out. The default is that upward movement zooms out. This behavior can be reversed by setting stxx.reverseMouseWheel=true.


Drawing is a modal activity. Drawing mode is activated by selecting a tool from the drawing toolbar (programmatically stxx.changeVectorType(tool)). Once drawing mode is activated, the crosshairs will automatically be displayed (regardless of the state of stxx.layout.crosshairs).

By default, drawing mode remains in effect until a user "unselects" drawing mode (by choosing "none" tool or by closing the drawing toolbar). Some product designers prefer a "one and done" interface where drawing mode is automatically deactivated after a drawing is completed. The following code will set the chart to "one and done" mode:

stxx.addEventListener("drawing", function() {

Developers can enable two possible modes for making drawings:

  • Default mode — The default method is a multi-click process. After a tool is selected, a user clicks once to begin a drawing (crosshairs will change color). The user then drags the mouse to the the drawing end-point and clicks again to finish the drawing. On touch devices, the user first positions the crosshair with their finger and then "taps" the screen to start the drawing and then, after dragging to the right position and size, taps again to complete it. This default mode is advantageous for two reasons. First, it gives the user more control, allowing them to carefully place their crosshairs and create accurate drawings. The second advantage is that this mode supports complex drawings that require more than two clicks (e.g., channels).

  • Drag to draw — The second method allows users to drag out drawings in a familiar way. Once a user selects a tool, they place their mouse or finger and create a drawing in a single stroke much as they would in a Paint program. This is often considered a more intuitive drawing method but lacks the accuracy and support for multi-point drawings.

Drawings retain their shape and scale across different periodicities. Clicking and dragging the body of a drawing will move it to another location. Hovering over a drawing, or tapping a drawing, will reveal its endpoints. The endpoints can be dragged to change the drawing's shape. To delete a drawing, hover to highlighted and right click. On touch devices, tap the drawing to highlight and then tap "the trash" can icon. (In the provided sample templates, hitting the "delete" or "backspace" key will also delete a highlighted drawing).

All drawings can be removed programmatically by calling CIQ.ChartEngine#clearDrawings. The drawing toolbar in the provided sample templates include a menu item to clear drawings.

Note: On touch devices, a user's crosshair will be positioned slightly up and to the left of the finger. This is important because it allows the user to see what they are highlighting.

Drawing palette

The drawing palette contains a large assortment of drawing tools along with a variety of controls used to configure the palette and manage drawings.

Drawing Palette
Control Description
List View Icon Displays the drawing tools in a list view.
Grid View Icon Displays the drawing tools in a grid view (as shown).
Detach Icon Detaches the palette from the side of the screen, making the palette draggable anywhere onscreen. Drag the detached palette using the drag strip Drawing Palette Drag Border at the top of the palette. Dock the palette by selecting the Attach control. Attach Control
No Tool Icon Deselects the current drawing tool; that is, sets the palette so that no drawing tool is in use.
Measure Icon Enables measurements of the chart area. Select the measure tool, then draw a line on the chart to measure an area.
Undo Icon Undoes drawing actions.
Redo Icon Restores drawing actions removed by Undo.
Tool Assortment Drop-Down Menu Enables selection of subsets of the drawing tools, such as text tools, statistics-related tools, and favorites.
Magnet Icon Causes a drawing tool to be attracted to a data series, such as the main chart series, a comparison series, or a study. Magnetizing a tool to a series provides precise placement of the drawing on the data series line. When the magnet is active, a blue bullet follows the data series to show the value currently selected. The drawing tools are magnetized to the series to which the mouse is closest. As you move the mouse close to another series, the drawing tools magnetize to that series. If a drawing is started on a series, the drawing tool is magnetized to the same series to finish the drawing.
Clear Drawings Icon Removes all drawings from the chart area.
Restore Default Parameters Icon Restores all drawing settings to their default values. Tool settings can be changed using the style palette.

The number of tools displayed on the drawing palette can be reduced by creating a set of favorites.

When the list view of the palette is active (see Drawing palette), a star appears next to each of the drawing tools.

Annotation Tool in List View

Select the star to mark the tool as one of your favorites.

In grid view on desktop browsers, right click a tool to open a pop-up window, then click the pop-up to add or remove the tool as a favorite.

Favorites are indicated by a star ornament in grid view. Annotation Tool Favorite

To see just your favorites, select Favorites from the drawing palette drop-down menu. Drop-Down Menu

Keyboard shortcuts

Drawing tools can be activated by keyboard shortcuts. Shortcuts are triggered by pressing the Alt or Option key in combination with an assigned letter. For example, Alt+L activates the Line tool.

Shortcuts are defined by adding an optional cq-tool-shortcut attribute to the tool button HTML element.

<cq-item class="ciq-tool" cq-tool="line" cq-tool-shortcut="l" cq-tool-group="line" stxtap="tool()">
    <span class="icon line"></span>

The letter in the cq-tool-shortcut attribute can be lower- or uppercase. Regardless of the case of the letter in the attribute, the key combination can use either uppercase or lowercase. For example, users can press Alt+a or Alt+A (shift key or caps lock engaged) for cq-tool-shortcut="a" or cq-tool-shortcut="A".

The modifier Ctrl can also be part of the shortcut. For example, both Alt+R and Ctrl+Alt+R activate the Rectangle tool. Ctrl can be included when the Alt+key combination is already assigned to a web browser feature or an application on the user’s device.

See the Accessibility section for the keyboard shortcuts supported by the technical-analysis-chart.html and basic-chart.html templates.

Style palette

The style palette appears when a drawing tool is selected. The palette contains controls that enable you to set properties of the drawing tool, such as line width, font, and background color.

Properties vary among tools. For example, the annotation tool has font properties, but does not have a background color or line width; the ellipse tool has background color and line width, but not font properties.

Style Palette
Control Description
Detach Icon Detaches the palette from the top of the screen, making the palette draggable anywhere onscreen. Drag the detached palette using the drag strip Style Palette Drag Border on the left side of the palette. Dock the palette by selecting the Attach control. Attach Control
Tool Name Identifies the currently selected tool (to which the styles apply).
Background Color Icon Sets the background color of the drawing.
Foreground Color Icon Sets the foreground or text color of the drawing.
Line Width Drop-Down Menu Sets the line width of the drawing.
Italics Icon Sets the font in italics.
Boldface Icon Sets the font in boldface.
Font Size Drop-Down Menu Sets the size of the font.
Font Family Drop-Down Menu Sets the font family.
Save Config Icon Saves the style palette settings (the configuration) for the selected tool. The tool retains the configuration even after the chart is closed. To restore the default configuration, select the X next to the Save Config control Save Config Icon with X or select the Restore Default Parameters control (see Drawing palette above).


Studies (also known as technical indicators) are added to charts interactively by means of user interface controls such as drop-down menus (see the Studies menu in sample-template-advanced.html). Studies are added to charts programmatically by calling CIQ.Studies.addStudy.

Studies can be rendered in the main chart panel as overlays to the primary instrument, or they can appear in secondary panels (windows) above or below the chart panel. By default, some studies appear as overlays; some, in secondary panels. The main chart panel cannot be moved or removed, and the primary series cannot be placed in a secondary panel.

Overlay Study Figure. Alligator study overlaid on chart.

Overlay studies include a context menu that can be used to modify the study or remove it from the chart. To access the context menu:

  • On desktop browsers — Highlight the study by hovering your mouse over the lines or shapes that make up the study. Right click to open the context menu. Select an item from the menu.

    Overlay Study Context Menu

  • On touch devices — Tap the study to open the context menu. Tap the gear icon to edit study properties. Tap the x icon to delete the study.

    Overlay Study Touch Context Menu

Studies can appear in secondary panels to separate the displays of multiple series.

Panel Studies Figure. Alligator, Aroon, and MACD studies in secondary panels.

The vertical size of secondary panels can be changed by dragging the panel top and bottom borders.

Secondary panels include a toolbar that can be used to reposition or delete the panel. On desktop browsers, hover your mouse over a study to reveal the toolbar.

Panel Study Toolbar

Secondary panel toolbar controls

Move Up Control Moves the panel upward in a stack of panels. If the panel is at the top of the stack, positions the panel above the chart.
Expand and Contract Control Expands the panel and hides any other panels. Or, if the panel has been expanded, returns it to its former size and reveals all hidden panels.
Move Down Control Moves the panel downward in a stack of panels. If the panel is at the bottom of the stack, positions the panel below the chart.
Close Control Closes the panel and destroys the study.

Drawings and annotations can be applied to overlay studies and studies in secondary panels using the Drawing palette and Style palette tools.

Panel Study Drawing Figure. Dashed line and annotation on MACD study in secondary panel.

Study Legend

A list of the studies applied to a chart can be included in a menu or overlaid on the chart as a legend. In the sample templates, the list of active studies is contained in the CURRENT STUDIES section of the Studies menu,


and in the Plots control, which appears on study panels or on charts when one or more studies overlays the chart.

Plots Legend

CURRENT STUDIES and Plots both enable you to edit and delete studies. In CURRENT STUDIES, edit a study by selecting it from the list. Delete a study by selecting the x icon next to the study name. Delete all studies by selecting CLEAR ALL. In Plots, select the gear icon to edit a study. Select the x icon to delete the study.

See the cq-study-legend web component for the details of implementing user interface controls like CURRENT STUDIES and Plots. See sample-template-advanced.html in the examples/templates folder for a working example.

Drag and drop

Studies can be positioned and managed by drag-and-drop user interactions. Overlay studies can be dragged into secondary panels. Studies in secondary panels can be dragged onto charts as overlays. Studies can be combined in secondary panels or on charts. See the main Drag and drop section for more information.

Periodicity and range

It is very important to understand the difference between "periodicity" and "range". While periodicity is the period of time contained within each bar, the range is the total amount of time that is displayed on the chart canvas. Both range and periodicity are measured in units of time. Different combinations of periodcity and range allow the user to view the chart data in many different ways.


The chart natively supports minute, daily, weekly and monthly periods. It also supports any multiple or compound of each, such as 7-minute, 3-day or 2-week periods. This allows firms to support many more periodicities than might be available from their market data feed. For example, a 15-minute period can be made available by specifying 3 x 5 minute intervals. This specification can be done programmatically (CIQ.ChartEngine#setPeriodicity) or through a menu.

It is important to consider the data intervals that are available from your market data feed and to select periodicity settings that meet your users requirements. It is also crucial that periodicity settings are not selected that would negatively impact performance. For instance, we do not recommend compounding by more than a factor of 10 because it will create very large network requests.

This "period" is too large. Performance will be slow due to large network requests.

stxx.setPeriodicity({ period: 30, timeUnit: "minute" }); // don't do this!

It is important to remember that the time associated with a bar reflects the beginning of the interval. For example, a 1-minute bar starting at 09:30:00.00 covers all data up to 09:30:59.999.

For securities that trade during extended hours sessions (pre and post market), it is possible to enable an extended hour display with the CIQ.ExtendedHours add on. Extended hours display only affects intraday charts (bars in minutes). To support flipping back and forth between display of extended hours, your quote server should accept a flag that will filter out the extra sessions.



Range is the total amount of time that is displayed on the chart. For example, if you have 60 one-minute bars visibile in your chart window, you are viewing a range of one hour (1H).

Using a range finder, such as the one found in the sample templates, users can easily snap the chart to a desired range. It is important to note that range finders often manipulate the period in order to neatly fit the bars in the chart window. The period adjustment will vary depending on how much chart canvas is available (i.e., the size of your browser window). For example, selecting a 5D range may adjust the period to 1H at one window size, but the same 5D range may adjust the period to 1.5H at a smaller window size to accomodate the bars.

Range Finder

Chart styles and types

A variety of chart styles (candle, bar, line, etc.) and aggregation types (Heikin-Ashi, Kagi, Point & Figure, etc.) can be set programmatically (CIQ.ChartEngine#setChartType) or through a menu system. The sample files demonstrate how to incorporate the different types in your menus. These chart styles and types are covered more in-depth in the Chart Styles and Types tutorial.

A variety of different y axis scales, including 'Log Scale', can be set programmatically by calling CIQ.ChartEngine#setChartScale.

Chart Styles and Types

Heads-up display (HUD)

A heads-up display (HUD) shows detailed information for series data points as the user mouses over the chart. The template file sample-template-advanced.html provides three types of HUDs:

  • Dynamic callout
  • Floating tooltip
  • Static HUD

Developers can also create custom HUDs.

Dynamic callout

The dynamic callout is enabled from the drop-down menu of the Info control.

Info drop-down menu with Show Dynamic Callout selected

The callout resembles a speech bubble that follows the mouse and points to the bar (data point) over which the mouse is hovering. The callout displays the highlighted bar's date/time, last price, estimated volume, and open, close, high, and low prices.

Chart with dynamic callout Figure. Chart with dynamic callout.
Floating tooltip

The floating tooltip is enabled from the Info control's drop-down menu.

Info drop-down menu with Show Tooltip selected

The floating tooltip is a semitransparent display that follows the mouse across the chart. The tooltip displays the date/time, close, open, high, and low prices, and volume of the bar pointed to by the mouse. A vertical highlight (or the crosshairs, if active) indicate the selected bar. If a study is enabled, information pertaining to the study is also displayed in the tooltip.

The floating tooltip is provided as an add-on that must be enabled. See the enabledAddOns documentation in the Chart Configuration tutorial for more information.

See CIQ.Tooltip for implementation and customization details.

Chart with floating tooltip and bar highlighting Figure. Chart with floating tooltip and bar highlighting.
Static HUD

The static (stationary) heads-up display is enabled and disabled from the drop-down menu of the crosshairs control.

Crosshairs drop-down menu with Show Heads-Up Display selected

The static HUD displays data for the bar targeted by the crosshairs. The data includes the bar's last price, open, close, high, low, and estimated volume.

Chart with crosshairs and static HUD Figure. Chart with crosshairs and static HUD.
Custom HUDs

Developers can create and implement their own heads-up displays using the ChartIQ injection API. See the Using API Injections tutorial.

The code below modifies the DOM with the high price for the bar that is in the chart crosshairs.

// Example assumes a global stxx reference to the chart engine.
// Crosshairs static HUD must be on screen.

let priorBar = null; // Used to prevent running the expensive DOM manipulations unecessarily.

function fillInHUD() {
	// stxx.cx is the crosshairs x-axis position.
	const bar = stxx.barFromPixel(stxx.cx);
	if (bar == priorBar) return;
	priorBar = bar;
	const barData = stxx.chart.xaxis[bar];
	if (barData == null) {
		priorBar = -1;
	} else {
		const barHigh = barData.data.High;
		// Assumes High is returned from your quote feed.
		if (barHigh) {
			// Replace DOM text with updated high.
			document.querySelector("cq-hu-high").innerHTML = barHigh;
		} else {
			document.querySelector("cq-hu-high").innerHTML = "";

stxx.remove("headsUpHR"); // Remove instance injections.
CIQ.ChartEngine.prototype.remove("headsUpHR"); // Remove prototype injections.
CIQ.ChartEngine.prototype.prepend("headsUpHR", fillInHUD); // Add the new injection.

Drag and drop

Charting elements such as y-axes and series (studies and comparisons) can be positioned and manipulated using drag-and-drop user interactions.

To drag and drop a charting element, do the following:

  1. Click and hold or press the element until one of the drag-and-drop icons appears. The icon indicates the direction in which the element can be dragged:

    • Drag and Drop Horizontally Icon — Horizontally
    • Drag and Drop Vertically Icon — Vertically
    • Drag and Drop All Directions Icon — All directions
  2. Drag the element to a container or boundary.

    Charts, panels, and axes are containers. The edges of charts, panels, and axes are boundaries.

    A blue rectangle appears when you drag to a container. A blue line appears when you drag to a boundary. The rectangle or line indicates the drop location.

    Note: A blue rectangle or line must appear before you can drop an element. At the screen edges, be careful to drag and drop within the charting area. The drag-and-drop icon turns to the default pointer or disappears when you drag an element out of the charting area. If you drop an element outside the charting area, the drag-and-drop action does not take effect.

  3. Drop the element by releasing the mouse button or lifting your finger or stylus from the screen.


Study and comparison series overlay charts or appear in panels above or below charts.

Series can be managed with drag and drop. Overlays can be dragged into panels. Series in panels can be dragged onto charts as overlays. Series can be combined. The y-axis of a series can be positioned to the left or right of the series.


  • Convert Overlay Series to Panel Series — Drag and drop an overlay series onto a chart boundary or panel boundary.
  • Convert Panel Series to Overlay Series — Drag and drop a panel series onto a chart.
  • Combine Series — Drag and drop multiple overlay series or panel series into a single panel. Or, drag and drop series from multiple panels onto a chart.
  • Uncombine Series — Drag and drop a series from a panel (containing multiple series) onto a panel boundary or chart boundary or onto a chart. Or, drag and drop an overlay series (from a chart containing multiple overlays) onto a chart boundary or panel boundary.
  • Position Panel Series — Drag and drop a panel series onto a chart boundary or panel boundary.
  • Position Y-Axis — Drag and drop the y-axis of a series onto the left or right boundary of the series. Or, drag and drop the series onto its own left or right boundary. See the Y-Axis section below for additional features.

All the y-axes related to a chart or panel can be positioned on the left or right of the chart or panel, or on the left or right of other y‑axes. Multiple y‑axes can be combined into a single axis. All by drag and drop.

Multiple y-axes occupy the same chart or panel when charts are overlaid by series or series are combined in panels.


  • Position Y-Axis on Left or Right of Chart — Drag and drop a chart y-axis onto the left or right boundary of the chart.
  • Position Y-Axis on Left or Right of Series — Drag and drop a series y-axis onto the left or right boundary of the series. Or, drag and drop a series onto its own left or right boundary.
  • Position Y-Axis on Left or Right of Another Y-Axis — Drag and drop a y-axis onto the left or right boundary of another y‑axis. Or, drag and drop a series onto the left or right boundary of a y-axis contained in the same panel or chart.
  • Combine Y-Axes — Drag and drop a y-axis onto another y-axis. Or, drag and drop a series onto a y-axis contained in the same panel or chart.
  • Uncombine Y-Axes — Drag and drop a series (whose y-axis is combined with another y-axis) onto its own left or right boundary or onto the boundary of a y‑axis contained in the same panel or chart.


ChartIQ supports accessibility by providing keystroke alternatives to using a mouse or touchscreen for access to chart functionality.

Chart area

Keystroke Functionality
= or numeric keypad + X-axis zoom in
- (hyphen) or numeric keypad - (minus) X-axis zoom out
+ Y-axis zoom in (if pressed on numeric keypad, x-axis zoom in)
_ (Shift + hyphen) Y-axis zoom out
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
Up Arrow* Scroll chart up 2% of the chart height or, if crosshairs enabled, move crosshairs up 2% of chart height
Down Arrow* Scroll chart down 2% of the chart height or, if crosshairs enabled, move crosshairs down 2% of chart height
Shift + Right Arrow* Scroll chart right 10 bars or, if crosshairs enabled, move crosshairs right 10 bars
Shift + Left Arrow* Scroll chart left 10 bars or, if crosshairs enabled, move crosshairs left 10 bars
Shift + Up Arrow* Scroll chart up 20% of the chart height or, if crosshairs enabled, move crosshairs up 20% of chart height
Shift + Down Arrow* Scroll chart down 20% of the chart height or, if crosshairs enabled, move crosshairs down 20% of chart height
PageUp or Alt + Right Arrow Scroll chart right by the maximum number of bars on screen
PageDown or Alt + Left Arrow Scroll chart left by the maximum number of bars on screen
Alt + \ Toggle the crosshairs and static information display
Alt + 0 Toggle the continuous zoom (if enabled)
Alt + K Open the table view
Home Scroll to the end of the chart (right-most candle) and reset the vertical zoom
End Scroll to the beginning of the chart (left-most candle) as loaded
Note: If the chart is using a quote feed, more data loads
Delete or Backspace Undo the active drawing (if in the process of drawing) or delete a highlighted item
Escape Undo the active drawing (if in the process of drawing) or close an open menu or close the table view
Tab Move focus to next item
Shift + Tab Move focus to previous item
Enter Select the currently focused item

*Values are configurable. See hotkeyConfig.hotkeys in /js/defaultConfiguration.js for customization options.


The example templates (such as technical-analysis-chart.html and basic-chart.html) include the following keyboard shortcuts for activating drawing tools when the drawing palette is open:

Tool PC Macintosh
Horizontal (line)Alt+HOption+H
Vertical (line)Alt+VOption+V

*Available in the Technical Analysis / Advanced Charting package only.

See also Keyboard shortcuts in the Drawing palette section.

Next steps